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)，它读出来的就是放大之后的尺寸
