如何获得像素的width，padding，border和margin的总和？

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 。