背景
使用css控制頁面有4種方式，分別為行內樣式(內聯樣式)、內嵌式、鏈接式、導入式。
如果想用javascript獲取一個元素的樣式信息，首先想到的應該是元素的style屬性。但是元素的style屬性僅僅代表了元素的內聯樣式，如果一個元素的部分樣式信息寫在內聯樣式中，一部分寫在外部的css文件中，通過style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計算樣式才獲取元素的樣式信息。
獲取計算樣式
元素的style下的屬性，默認為空字符串；
獲取計算后的樣式（非行間樣式）:
getComputedStyle(element).屬性
獲取到的結果為 帶單位的字符串 ，如 ：100px;
寫法： getComputedStyle(box).height；
獲取寬高（尺寸）
以上獲取到的都是不帶單位的數字，并且范圍為可視區；
絕對位置
元素距離
如果要使用上面的屬性，一定要做到以下幾點：
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) } 在此了解以下渲染幀：
渲染幀是指瀏覽器一次完整繪制過程，幀之間的時間間隔是DOM視圖更新的最小間隔。 由于主流的屏幕刷新率都在60hz，因此渲染一幀的事件就必須控制在16.7ms內才能保證不掉幀。也就是說每一次渲染都要在 16.7ms 內頁面才夠流暢不會有卡頓感。
封裝絕對位置
// 使用邊框、定位位置 class Tools { position(ele){ let left = 0; let top = 0; let obj = ele; while(obj){ // t = 當前元素的外邊距 + 當前元素邊框 left += obj.offsetLeft + obj.clientLeft; top += obj.offsetTop + obj.clientTop; //重新設置Obj是誰，讓obj變為當前的定位父級 obj = obj.offsetParent; //box3 -> box2 -> box1 -> } left -= ele.clientLeft; //多加一次box3的border,所以要減去 top -= ele.clientTop; return { left, top } } } let t1 = new Tools; console.log(t1.position(box3).top);返回頂部的小例子
<style>*{ margin:0; padding:0;}#box{ width:100px; height:50px; font-size:20px; text-align: center; line-height: 50px; color:#fff; background: red; cursor: pointer; position:fixed; bottom:0; right:0; display: none;}body,html{ height:3000px;}</style></head><body> <div id="box">返回頂部</div><script> window.onscroll = function(){ // console.log(window.pageYOffset); if(window.pageYOffset >= 600){ box.style.display = 'block'; }else{ box.style.display = 'none'; } } let timer = null; box.onclick = function(){ let t = window.pageYOffset; timer = setInterval(() => { t-=100; if(t <= 0){ t = 0; clearInterval(timer); } window.scrollTo(0,t); }, 16.7); }</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
