javascript - 如何获得以像素为单位的宽度、填充、边框和边距的总和？

Question

我想获取元素的宽度，包括元素本身的宽度、边框(如果有)、填充和边距(不是 JQuery)？

Answer 1

使用Element.getBoundingClientRect()对于没有边距的宽度， Window.getComputedStyle() 对于边距:

var d= document.querySelector('div'),
    cs= getComputedStyle(d);

console.log(d.getBoundingClientRect().width +
            parseFloat(cs.getPropertyValue('margin-left')) +
            parseFloat(cs.getPropertyValue('margin-right'))
           );

div {
  width: 40px;
  padding: 10px;
  border: 5px solid green;
  margin-left: 15px;
  margin-right: 5px;
}

<div>
  This is a test
</div>

即使上面的 CSS 只使用整数，结果也可能有小数。在 Chrome 中，5px 的边框样式会导致 4.54545450210571px 的实际边框。