99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

使用javascript怎么獲取元素的計算樣式

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

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

背景

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

  • 行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標簽中的style屬性中，如 <div ></div>

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

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

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

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

獲取計算樣式

元素的style下的屬性，默認為空字符串；

獲取計算后的樣式（非行間樣式）:
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é)果；

  • 邊框尺寸

  1. clientLeft/clientTop邊框尺寸

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

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

絕對位置

元素距離

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

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

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

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

  • getBoundingClientRect()

當前元素到頁面可視區(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 = 當前元素的外邊距 + 當前元素邊框
 left += obj.offsetLeft + obj.clientLeft;
 top += obj.offsetTop + obj.clientTop;
 //重新設(shè)置Obj是誰，讓obj變?yōu)楫斍暗亩ㄎ桓讣?
 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怎么獲取元素的計算樣式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前標題：使用javascript怎么獲取元素的計算樣式
轉(zhuǎn)載來源：http://www.yijiale78.com/article8/gijhip.html

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

廣告

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

小程序開發(fā)