getBoundingClientRect（）。width和height是否包含元素的填充和边框？

Question

getBoundingClientRect（）。width和height属性，返回值是否包括元素的填充和边框？

Answer 1

TLDR;

它将始终返回边框（下面是绿色框）的尺寸，其中包含内容区域，填充区域和边界区域，如CSS Box Model所定义。

宽度样式

但是，不得混用 content width （元素布局的属性）和 style width （元素布局的约束，(function() { 'use strict'; const nodeRemoval = (mutationList, observer) => { mutationList.forEach( (mutation) => { if (mutation.addedNodes && mutation.addedNodes.length) { mutation.target.querySelectorAll('[aria-label="Advertiser link"]').forEach( (adLink) => adLink.remove() ); } }); }, targetNode = document.querySelector('body'), options = { childList: true, attributes: false, subtree: true }, observer = new MutationObserver(nodeRemoval); observer.observe(targetNode, options); })(); 规则） ），这是非常不同的东西。 width: xxx;仅影响样式宽度约束是否应包含 border 和 padding 。

示例展示

在第一个代码段中，我们使用box-sizing规则，以便 style width == boder + padding + content width 。 box-sizing: border-box的结果为getBoundingClientRect().width，它等于样式宽度。

140

var x = document.getElementById("x");
console.log('getBoundingClientRect().width =', x.getBoundingClientRect().width);
console.log('getComputedStyle(x).width =', getComputedStyle(x).width);

#x {
  border: 20px solid blue;
  padding: 10px;
  width: 140px;
  box-sizing: border-box;
}

在第二个片段中，我们使用<div id=x>Border Box</div>规则，以便 style width == content width 。 box-sizing: content-box的结果仍然是getBoundingClientRect().width，因为边框 + 填充 + 内容宽度< / em> 未更改，只有样式宽度已更改。

140

var y = document.getElementById("y");
console.log('y.getBoundingClientRect().width =', y.getBoundingClientRect().width);
console.log('getComputedStyle(y).width =', getComputedStyle(y).width);

#y {
  border: 20px solid blue;
  padding: 10px;
  width: 80px;
  box-sizing: content-box;
}

参考文献

• MDN | Introduction to the CSS box model
• CSSWG | CSS2 (Box Model)
• MDN | Element.getBoundingClientRect()

Answer 2

默认情况下会返回width+padding+border，为什么你会问？它相对于box-sizing属性，默认情况下为content-box

示例＃1 box-sizing:content-box

  

仅包含内容。不包括边框，填充和边距

表示当我们设置宽度300px时，它仅设置为内容，然后添加填充和边框。

＆＃13;

＆＃13;

console.log(document.querySelector('.test').getBoundingClientRect().width)

＆＃13;

.test {
  box-sizing: content-box;
  width: 300px;
  padding: 10px;
  border: 2px solid;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

示例＃2 box-sizing:border-box

  

包括内容，填充和边框。保证金不包括在内

表示我们将宽度300px内容设置为填充和边框。

＆＃13;

＆＃13;

console.log(document.querySelector('.test').getBoundingClientRect().width)

＆＃13;

.test {
  box-sizing: border-box;
  width: 300px;
  padding: 10px;
  border: 2px solid;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

  

高度不受影响。