为何getComputedStyle无法正确计算带内边距div的宽度？

问题 #

这是一个基础问题，但我没找到答案。为什么getComputedStyle不能正确计算带内边距的div宽度？它不是应该把内边距和外边距都包含进去吗？提前感谢！

示例代码 #

<!DOCTYPE html>
<html lang="en">
<style>
 #A {
    display:inline-block;
    background:red; 
      padding-right:100px;
 }
</style>
<body> 
 <div id="A">a</div>               
 <div id="RESULT"></div>       
 <script>  
   document.getElementById("RESULT").innerHTML = "the width of A is:" + window.getComputedStyle(document.getElementById("A")).width;
 </script>
</body>
</html>

解答 #

核心原因：CSS盒模型的默认规则 #

getComputedStyle返回的width属性严格遵循CSS标准盒模型的默认定义：width仅指代元素的内容区域宽度，不包含内边距（padding）、边框（border），更不包含外边距（margin）。

你示例中的div设置了padding-right:100px，这部分内边距会让元素的实际占用宽度变大，但不会被计入width属性值里——getComputedStyle(A).width只会返回字符"a"对应的内容宽度。

获取包含内边距的总宽度的方法 #

方法1：使用getBoundingClientRect()

这个API返回的width是元素在页面中实际占据的宽度，包含内容、内边距和边框（不含外边距）：

const elem = document.getElementById("A");
const rect = elem.getBoundingClientRect();
document.getElementById("RESULT").innerHTML = "总宽度（含内边距+边框）：" + rect.width + "px";

方法2：手动计算各部分宽度之和

通过getComputedStyle分别获取内容宽度、内边距、边框宽度后相加：

const style = window.getComputedStyle(document.getElementById("A"));
const totalWidth = 
  parseFloat(style.width) + 
  parseFloat(style.paddingLeft) + 
  parseFloat(style.paddingRight) + 
  parseFloat(style.borderLeftWidth) + 
  parseFloat(style.borderRightWidth);
document.getElementById("RESULT").innerHTML = "总宽度（含内边距+边框）：" + totalWidth + "px";

方法3：修改盒模型规则（让width包含内边距）

给元素添加box-sizing: border-box，可以让width属性直接包含内容、内边距和边框的总宽度：

#A {
  display:inline-block;
  background:red; 
  padding-right:100px;
  box-sizing: border-box;
}

此时getComputedStyle(A).width就会返回包含内边距的总宽度了。

内容的提问来源于stack exchange，提问作者exp8j