Javascript 如何获得DOM元素的维度，减去边框和填充？

如何使用纯JavaScript获取

（或任何其他元素）内容框的大小？所谓内容框，我不是指div中文本的大小，而是指元素的屏幕大小减去边框和填充

这就是我在Chrome开发工具中看到的。我只需要JavaScript中的蓝色部分（720x540）。我对远视和公司的问题是，他们返回图形中黑色实心矩形的尺寸（在边距和边框之间很难看到）

---

请注意，

宽度

和

高度

CSS属性可以设置，也可以不设置；我想要尺寸。进一步注意，填充和边框可能是一致的，也可能是不一致的（例如，它可能只有一个边框）。

我找到了一个解决方案，它似乎工作正常，并且得到了很好的支持。但我仍然会接受其他不需要从字符串中解析数字的答案。一定有别的办法

var style = window.getComputedStyle(my_div);
var width = parseFloat(style.width);
var height = parseFloat(style.height);

---

element.clientWidth

将为您提供包含填充的宽度（但没有边框）

然后，您可以

parseFloat

计算

paddingLeft

和

paddingRight

的值。以下是一个例子：

 function getElementContentWidth(element) {
  var styles = window.getComputedStyle(element);
  var padding = parseFloat(styles.paddingLeft) +
                parseFloat(styles.paddingRight);

  return element.clientWidth - padding;
}

---

错。它提供了填充的宽度。这是不需要的。@vsync它似乎得到CSS

宽度

和

高度

，通常不包括填充，除非您有

框大小：边框框

。您可以创建此行为的一个小演示吗？您不需要第二个基数参数

parseFloat

，只需要

parseInt

。你有没有

padding:2rem

而不是

px

作为单位？