背景
使用css控制頁面有4種方式，分別為行內(nèi)樣式(內(nèi)聯(lián)樣式)、內(nèi)嵌式、鏈接式、導(dǎo)入式。
如果想用javascript獲取一個(gè)元素的樣式信息，首先想到的應(yīng)該是元素的style屬性。但是元素的style屬性僅僅代表了元素的內(nèi)聯(lián)樣式，如果一個(gè)元素的部分樣式信息寫在內(nèi)聯(lián)樣式中，一部分寫在外部的css文件中，通過style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計(jì)算樣式才獲取元素的樣式信息。
獲取計(jì)算樣式
元素的style下的屬性，默認(rèn)為空字符串；
獲取計(jì)算后的樣式（非行間樣式）:
getComputedStyle(element).屬性
獲取到的結(jié)果為 帶單位的字符串 ，如 ：100px;
寫法： getComputedStyle(box).height；
獲取寬高（尺寸）
以上獲取到的都是不帶單位的數(shù)字，并且范圍為可視區(qū)；
絕對(duì)位置
元素距離
如果要使用上面的屬性，一定要做到以下幾點(diǎn)：
1、子集有絕對(duì)定位；
2、定位父級(jí)也一定要有定位；
3、自己和父級(jí)都要有寬高（觸發(fā)haslayout,zoom:1）;
當(dāng)前元素到頁面可視區(qū)的尺寸、距離；
注意:
是跟滾動(dòng)條走的。
也就是拖動(dòng)滾動(dòng)條值會(huì)變；
包含：width/height/left/right/top/bottom/x/y
寫法：box2.getBoundingClientRect(）；
使用定位距離做一個(gè)小例子：
let timer = null; box.onclick =function (){ timer = setInterval(()=>{ box.style.left= box.offsetLeft + 1 +'px'; },16.7) } 在此了解以下渲染幀：
渲染幀是指瀏覽器一次完整繪制過程，幀之間的時(shí)間間隔是DOM視圖更新的最小間隔。 由于主流的屏幕刷新率都在60hz，因此渲染一幀的事件就必須控制在16.7ms內(nèi)才能保證不掉幀。也就是說每一次渲染都要在 16.7ms 內(nèi)頁面才夠流暢不會(huì)有卡頓感。
封裝絕對(duì)位置
// 使用邊框、定位位置 class Tools { position(ele){ let left = 0; let top = 0; let obj = ele; while(obj){ // t = 當(dāng)前元素的外邊距 + 當(dāng)前元素邊框 left += obj.offsetLeft + obj.clientLeft; top += obj.offsetTop + obj.clientTop; //重新設(shè)置Obj是誰，讓obj變?yōu)楫?dāng)前的定位父級(jí) 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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
