前端如何高效使用getBoundingClientRect API？
- 内容介绍
- 文章标签
- 相关推荐
本文共计743个文字，预计阅读时间需要3分钟。
前情+在前端开发需求中，经常需要获取元素的尺寸和位置属性。以往的做法是调用不同的API获取相关属性。+getBoundingClientRect()介绍+getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
前情在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同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对象介绍
使用示例考虑到兼容性问题，尽量仅使用
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>
演示地址：jsbin.com/wozabey/1/edit?html,css,js,output
好好学习！天天向上！本文共计743个文字，预计阅读时间需要3分钟。
前情+在前端开发需求中，经常需要获取元素的尺寸和位置属性。以往的做法是调用不同的API获取相关属性。+getBoundingClientRect()介绍+getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
前情在前端开发需求中，经常需要获取元素的尺寸位置相关的属性，以往的做法是调用不同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对象介绍
使用示例考虑到兼容性问题，尽量仅使用
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>
演示地址：jsbin.com/wozabey/1/edit?html,css,js,output
好好学习！天天向上！