如何获取DOM元素的尺寸，减去边框和填充？

Question

如何使用纯JavaScript 获取<div>（或任何其他元素）的内容框大小？通过内容框，我不是指div中文本的大小，我的意思是元素的屏幕尺寸减去边框和填充。

这是我在Chrome开发工具中看到的内容。我只想要JavaScript中的蓝色部分（720 x 540）。我对offsetHeight和公司的问题是它们返回图形中黑色实心矩形的尺寸（很难看到 - 在边距和边框之间）。

请注意，width和height CSS属性可能已设置，也可能未设置;我想要的尺寸无论如何。进一步注意，填充和边框可能一致，也可能不一致（例如，它可能只有一个边框）。

Answer 1

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; } 。这是一个例子：

{{1}}

Answer 2

我找到了一个似乎正常工作的解决方案并得到了相当好的支持。但我仍然会接受其他不需要解析字符串数字的答案。必须有另一种方式！

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