Javascript getBoundingClientRect（）。宽度和高度是否包括元素的填充和边框？

getBoundingClientRect（）.width和height属性，而返回的值包括元素的填充和边框吗？

默认情况下，它返回

宽度+填充+边框

为什么？

因为它与

框大小调整

CSS属性相关，该属性可以有两个值：

内容框

（默认值）

边框框

---

内容框：仅包括内容。边框、填充和边距不包括在内

这意味着当您设置宽度时，该宽度仅在添加填充和边框后才设置为内容

console.log（document.querySelector（'p'）.getBoundingClientRect（）.width）

p{
框大小：内容框；
宽度：300px；
填充：10px；
边框：2倍实心；
}

控制台应记录324px，因为宽度为300px
填充为10px左10px右
边框为2px左2px右
总计为300+10+10+2+2=324

TLDR； 它将始终返回边框框（下面的绿色框）的尺寸，其中包含中定义的内容区域、填充区域和边框区域

宽度样式 但是，不能将内容宽度（元素布局的一个属性）和样式宽度（元素布局的一个约束，

width:xxx；

规则）混为一谈，它们是非常不同的东西。框大小调整只会影响样式宽度约束是否应包括边框和填充

举例说明 在第一个代码片段中，我们使用

框大小：边框框

规则，使样式宽度==boder+padding+content-width。

getBoundingClientRect（）.width

的结果是

140

，它等于样式宽度

var x=document.getElementById（“x”）；
log（'getBoundingClientRect（）.width='，x.getBoundingClientRect（）.width）；
log（'getComputedStyle（x.width='，getComputedStyle（x.width））
#x{
边框：20px纯蓝；
填充：10px；
宽度：140px；
框大小：边框框；
}
边框框
-你可以自己测试。@Pointy我测试得够多了，从不同的结果中变得足够困惑，这就是为什么我在这里，但谢谢：）是的，像这样的事情可能会让人困惑；这就是为什么在我的小提琴中，我用巨大的边框和填充物来设置元素，这样我就不必精确地做数学了：“ReScRIMIME，我想你应该把我的答案考虑在这一点上，甚至没有想到它可能取决于盒子大小。很好的答案：）在开发人员控制台中进行简单的测试将为您提供答案，请尝试更多地使用它。乐意帮助：）如果您想使用
框大小：边框框
和not count border您可以使用
框影
作为视觉替代品。@ZohirSalak我认为您的回答有点误导，因为您声明默认情况下它返回宽度+填充+边框。它总是返回宽度+填充+边框。只有
宽度
和
高度
的行为受
框大小
规则的影响。@ZohirSalak我认为这可能会让人感到困惑，因为“宽度”是一个约束（CSS规则），正如我们所知，它的行为可以随着
框大小
规则而改变，而“内容宽度”是。初学者往往把两者混为一谈
getBoundingClientRect
将始终返回，而计算的
width
样式约束可能会根据框大小而改变。我在回答中已经说明了这一点：。