javascript获取元素的计算样式

背景

使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。

如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。

获取计算样式

元素的style下的属性，默认为空字符串；

获取计算后的样式（非行间样式）:
getComputedStyle(element).属性

获取到的结果为 带单位的字符串 ，如 ：100px;

写法： getComputedStyle(box).height；

获取宽高（尺寸）

clientLeft/clientTop边框尺寸 getComputedStyle(box3).borderTopWidth 边框尺寸

以上获取到的都是不带单位的数字，并且范围为可视区；

绝对位置

元素距离

如果要使用上面的属性，一定要做到以下几点：
1、子集有绝对定位；
2、定位父级也一定要有定位；
3、自己和父级都要有宽高（触发haslayout,zoom:1）;

当前元素到页面可视区的尺寸、距离；

注意:

是跟滚动条走的。
也就是拖动滚动条值会变；

包含：width/height/left/right/top/bottom/x/y

写法：box2.getBoundingClientRect(）；

使用定位距离做一个小例子：

 let timer = null; box.onclick =function (){ timer = setInterval(()=>{ box.style.left= box.offsetLeft + 1 +'px'; },16.7) }