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

Question

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

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

请注意,可能会也可能不会设置width和heightCSS属性; 我想要的尺寸无论如何.进一步注意,填充和边框可能是一致的,也可能不一致(例如,它可能只有一个边框).

Answer 1

element.clientWidth 会给你宽度,包括填充(但没有边框).

然后,你可以和和parseFloat的值.这是一个例子:paddingLeftpaddingRight

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

  return element.clientWidth - padding;
}

Answer 2

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

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