使用javascript怎么獲取元素的計(jì)算樣式

這篇文章給大家介紹使用javascript怎么獲取元素的計(jì)算樣式，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

泗水網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),泗水網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為泗水上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的泗水做網(wǎng)站的公司定做！

背景

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

  • 行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標(biāo)簽中的style屬性中，如 <div ></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獲取一個(gè)元素的樣式信息，首先想到的應(yīng)該是元素的style屬性。但是元素的style屬性僅僅代表了元素的內(nèi)聯(lián)樣式，如果一個(gè)元素的部分樣式信息寫在內(nèi)聯(lián)樣式中，一部分寫在外部的css文件中，通過(guò)style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計(jì)算樣式才獲取元素的樣式信息。

獲取計(jì)算樣式

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

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

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

寫法： getComputedStyle(box).height；

獲取寬高（尺寸）

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

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

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

  • 邊框尺寸

  1. clientLeft/clientTop邊框尺寸

  2. getComputedStyle(box3).borderTopWidth 邊框尺寸

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

絕對(duì)位置

元素距離

  • offsetParent  定位父級(jí)，沒(méi)有定位父級(jí)走body;

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

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

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

  • getBoundingClientRect()

當(dāng)前元素到頁(yè)面可視區(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)
 }

在此了解以下渲染幀：
渲染幀是指瀏覽器一次完整繪制過(guò)程，幀之間的時(shí)間間隔是DOM視圖更新的最小間隔。 由于主流的屏幕刷新率都在60hz，因此渲染一幀的事件就必須控制在16.7ms內(nèi)才能保證不掉幀。也就是說(shuō)每一次渲染都要在 16.7ms 內(nèi)頁(yè)面才夠流暢不會(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是誰(shuí)，讓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>

關(guān)于使用javascript怎么獲取元素的計(jì)算樣式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：使用javascript怎么獲取元素的計(jì)算樣式
轉(zhuǎn)載來(lái)源：http://bm7419.com/article8/gijhip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、移動(dòng)網(wǎng)站建設(shè)、電子商務(wù)、企業(yè)建站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)