如何获得像素宽度，填充，边框和边距的总和？

Question

我想获取元素宽度，包含元素本身的宽度，边框（如果有），填充和边距（不是JQuery）？

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<div>
  This is a test
</div>

＆＃13;

＆＃13;

＆＃13;

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