javascript獲取元素的計算樣式

更新時間：2019年05月24日 14:40:31 作者：bravelyr

在做html頁面開發(fā)時，經(jīng)常會使用到js（javascript）來處理客戶端的邏輯，下面我們就來看一下，如何使用js來獲取頁面上的元素

背景

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

行內(nèi)樣式(內(nèi)聯(lián)樣式)即寫在html標簽中的style屬性中，如 <div style="width:100px;height:100px;"></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獲取一個元素的樣式信息，首先想到的應該是元素的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個，如果設置一個固定值，就以固定值為依據(jù)顯示，不會以被內(nèi)容撐開顯示；
ele.scrollWidth/Height被內(nèi)容撐開的高度（不包含邊框）；
無論是否設置固定樣式，都以被內(nèi)容撐開我顯示結(jié)果；
邊框尺寸

clientLeft/clientTop邊框尺寸
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;
 //重新設置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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: