CSS 元素的尺寸

const dom = document.querySelector(‘.size’)
以下方法只是拿的width举例

浏览器渲染管线

• dom.style.width:

它读取/设置的是浏览器渲染管线的第一个步骤dom解析,也就是DOM树
比如:

  <a style="width:100px"></a>
  <a style="width: auto"></a>

dom.style.width读取是这个Node节点的值,写的是啥读取啥

• getComputedStyle(dom).width:

它读取的是浏览器渲染管线的第二个步骤样式解析，CSSOM树。它读取的是样式计算后的结果
比如: 在标签上写了style样式，又在内联样式中设置了样式等
最终计算后确定一个明确的值，即便写的是百分比样式

Layout tree布局树

这里面包含了元素的几何信息，浏览器渲染管线里有dom树、样式树,经过综合计算,算出这个元素最终在页面上它应该占用的尺寸空间

• clientWidth: content + padding

  读取元素的内容区域content和padding区域,不包含边框和滚动条

• offsetWidth: content + padding + scroll + border
  如果这个元素没有边框和滚动条,读取的结果和clientWidth一样

• scrollWidth: visible + invisible

  它读取的是元素整个可滚动区域的宽/高

• getBoundingClientRect() 可见尺寸

  var size = dom.getBoundingClientRect()  // return object 
  size.width
  

上面的三种方法可能包含了边框、padding这些样式尺寸,而getBoundingClientRect()读取的是真正的可见尺寸,即用户在浏览器中所见到的尺寸

比如在给元素添加了transform: scale(2)，它读出来的就是放大之后的尺寸