背景

使用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) }