溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用javascript怎么獲取元素的計算樣式，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
背景
使用css控制頁面有4種方式，分別為行內樣式(內聯樣式)、內嵌式、鏈接式、導入式。
行內樣式(內聯樣式)即寫在html標簽中的style屬性中，如 <div ></div>
內嵌樣式即寫在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屬性僅僅代表了元素的內聯樣式，如果一個元素的部分樣式信息寫在內聯樣式中，一部分寫在外部的css文件中，通過style屬性是不能獲取到元素的完整樣式信息的。因此，需要使用元素的計算樣式才獲取元素的樣式信息。
獲取計算樣式
元素的style下的屬性，默認為空字符串；
獲取計算后的樣式（非行間樣式）:
getComputedStyle(element).屬性
獲取到的結果為 帶單位的字符串 ，如 ：100px;
寫法： getComputedStyle(box).height；
獲取寬高（尺寸）
ele.clientHeight/Width 支持padding,不包含邊框，元素可視區寬度；
ele.offsetWidth/Height 包含padding、border
以上2個，如果設置一個固定值，就以固定值為依據顯示，不會以被內容撐開顯示；
ele.scrollWidth/Height被內容撐開的高度（不包含邊框）；
無論是否設置固定樣式，都以被內容撐開我顯示結果；
邊框尺寸
clientLeft/clientTop邊框尺寸
getComputedStyle(box3).borderTopWidth 邊框尺寸
以上獲取到的都是不帶單位的數字，并且范圍為可視區；
絕對位置
元素距離
offsetParent 定位父級，沒有定位父級走body;
offsetLeft 當前元素（左外邊框）到定位父級的（左內邊框）距離；
offsetTop 當前元素（上外邊框）到定位父級的（上內邊框）距離；
獲取的是不帶單位的數字。
如果要使用上面的屬性，一定要做到以下幾點：
1、子集有絕對定位；
2、定位父級也一定要有定位；
3、自己和父級都要有寬高（觸發haslayout,zoom:1）;
getBoundingClientRect()
當前元素到頁面可視區的尺寸、距離；
注意:
是跟滾動條走的。
也就是拖動滾動條值會變；
包含：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內才能保證不掉幀。也就是說每一次渲染都要在 16.7ms 內頁面才夠流暢不會有卡頓感。
封裝絕對位置
// 使用邊框、定位位置
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變為當前的定位父級
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>關于使用javascript怎么獲取元素的計算樣式就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
