前情
在前端開發需求中,經常需要獲取元素的尺寸位置相關的屬性,以往的做法是呼叫不同api獲取相關屬性的。
getBoundingClientRect介紹
getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。
標準盒子模型:元素的尺寸等於width/height + padding + border-width的總和。如果box-sizing: border-box,則元素的的尺寸等於 width/height。
top
, left
, right
, bottom
屬性是使用物件的其他屬性的值來計算獲得的,Object.keys()查詢時將失敗,Object.assign()無法複製返回的屬性
呼叫方式:
domRect = element.getBoundingClientRect();
domRect物件介紹
domRect | 這個物件是由該元素的 getClientRects()方法返回的一組矩形的集合 |
---|---|
left | 元素左邊距離瀏覽器可視窗左邊的距離 |
right | 元素右邊距離瀏覽器視可視窗左邊的距離 |
top | 元素頂邊距離瀏覽器視可視窗頂邊的距離 |
bottom | 元素底邊距離瀏覽器視可視窗頂邊的距離 |
width | 元素自身的寬 |
height | 元素自身的高 |
x | 元素左邊距離瀏覽器可視窗左邊的距離 |
y | 元素頂邊距離瀏覽器可視窗頂邊的距離 |
考慮到相容性問題,儘量僅使用
left
,top
,right
, 和bottom
屬性是最安全的
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 300px;
height: 300px;
overflow:auto;
}
.item{
width: 600px;
height: 60px;
text-align: left;
line-height: 60px;
margin: 60px 0 0 60px;
color: white;
background-color: blue;
}
.tips{
padding: 10px;
}
.rect_detail{
padding: 10px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item">DOM0</div>
<div class="item">DOM1</div>
<div class="item">DOM2</div>
<div class="item">DOM3</div>
</div>
<p class="tips">拖動滾動條檢視值變化:</p>
<div class="rect_detail">
DOM2元素:
</div>
<script>
var doms = document.querySelectorAll('.item');
var container = document.querySelector('.container');
var result = document.querySelector('.rect_detail');
container.addEventListener('scroll', function() {
var donRect = doms[2].getBoundingClientRect();
result.innerHTML = "DOM2元素:<br />" +
"left:"+donRect.left + "<br />" +
"right:"+donRect.right + "<br />" +
"top:"+donRect.top + "<br />" +
"bottom:"+donRect.bottom + "<br />" +
"width:"+donRect.width + "<br />" +
"height:"+donRect.height + "<br />" +
"x:"+donRect.x + "<br />" +
"y:"+donRect.y;
}, false);
</script>
</body>
</html>