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

Question

如何获取 <div> 的内容框大小(或任何其他元素)使用纯 JavaScript？我所说的内容框不是指 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;
}