點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

javascript獲取元素的計算樣式

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:56:12

javascript獲取元素的計算樣式

javascript獲取元素的計算樣式:背景使用css控制頁面有4種方式，分別為行內(nèi)樣式(內(nèi)聯(lián)樣式)、內(nèi)嵌式、鏈接式、導(dǎo)入式。行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標(biāo)簽中的style屬性中，如 <div style=width:100px;height:100px;></div> 內(nèi)嵌樣式即寫在style標(biāo)簽

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascript獲取元素的計算樣式:背景使用css控制頁面有4種方式，分別為行內(nèi)樣式(內(nèi)聯(lián)樣式)、內(nèi)嵌式、鏈接式、導(dǎo)入式。行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標(biāo)簽中的style屬性中，如 <div style=width:100px;height:100px;></div> 內(nèi)嵌樣式即寫在style標(biāo)簽

背景

使用css控制頁面有4種方式，分別為行內(nèi)樣式(內(nèi)聯(lián)樣式)、內(nèi)嵌式、鏈接式、導(dǎo)入式。

行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標(biāo)簽中的style屬性中，如 <div style="width:100px;height:100px;"></div>

內(nèi)嵌樣式即寫在style標(biāo)簽中，例如<style type="text/css">div{width:100px; height:100px}</style>

鏈接式即為用link標(biāo)簽引入css文件，例如<link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" />

導(dǎo)入式即為用import引入css文件，例如@import url("test.css")

如果想用javascript獲取一個元素的樣式信息，首先想到的應(yīng)該是元素的style屬性。但是元素的style屬性僅僅代表了元素的內(nèi)聯(lián)樣式，如果一個元素的部分樣式信息寫在內(nèi)聯(lián)樣式中，一部分寫在外部的css文件中，通過style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計算樣式才獲取元素的樣式信息。

獲取計算樣式

元素的style下的屬性，默認(rèn)為空字符串；

獲取計算后的樣式（非行間樣式）:
getComputedStyle(element).屬性

獲取到的結(jié)果為帶單位的字符串，如：100px;

寫法： getComputedStyle(box).height；

獲取寬高（尺寸）

ele.clientHeight/Width 支持padding,不包含邊框，元素可視區(qū)寬度；

ele.offsetWidth/Height 包含padding、border
以上2個，如果設(shè)置一個固定值，就以固定值為依據(jù)顯示，不會以被內(nèi)容撐開顯示；

ele.scrollWidth/Height被內(nèi)容撐開的高度（不包含邊框）；
無論是否設(shè)置固定樣式，都以被內(nèi)容撐開我顯示結(jié)果；

邊框尺寸

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

以上獲取到的都是不帶單位的數(shù)字，并且范圍為可視區(qū)；

絕對位置

元素距離

offsetParent 定位父級，沒有定位父級走body;

offsetLeft 當(dāng)前元素（左外邊框）到定位父級的（左內(nèi)邊框）距離；

offsetTop 當(dāng)前元素（上外邊框）到定位父級的（上內(nèi)邊框）距離；
獲取的是不帶單位的數(shù)字。

如果要使用上面的屬性，一定要做到以下幾點(diǎn)：
1、子集有絕對定位；
2、定位父級也一定要有定位；
3、自己和父級都要有寬高（觸發(fā)haslayout,zoom:1）;

getBoundingClientRect()

當(dāng)前元素到頁面可視區(qū)的尺寸、距離；

注意:

是跟滾動條走的。
也就是拖動滾動條值會變；

包含：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內(nèi)才能保證不掉幀。也就是說每一次渲染都要在 16.7ms 內(nèi)頁面才夠流暢不會有卡頓感。

封裝絕對位置

// 使用邊框、定位位置
 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)前的定位父級
 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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript獲取元素的計算樣式

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：獲取元素 js

熱門焦點(diǎn)

javascript獲取元素的計算樣式

javascript獲取元素的計算樣式

javascript獲取元素的計算樣式

最新推薦

猜你喜歡

熱門推薦