getBoundingClientRect() 的用法
程序员文章站
2022-05-11 13:06:25
...
getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
来看个例子：
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
<script>
var box1 = document.getElementById("box1");
var rect = box1.getBoundingClientRect();
console.log(rect.top);
</script>
输出结果：
要想单独输出left top right bottom的值，可以这样
console.log(box1.getBoundingClientRect().left); // 元素左边距离页面左边的距离
console.log(box1.getBoundingClientRect().top);// 元素上边距离页面上边的距离
console.log(box1.getBoundingClientRect().right); // 元素右边距离页面左边的距离
console.log(box1.getBoundingClientRect().bottom); //元素下边距离页面上边的距离
注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE7中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0，IE为2
document.documentElement.clientLeft; // 非IE为0，IE为2
兼容方法可写成：
function getClientRect(elem){
var rect = elem.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return{
left : rect.left - left,
top : rect.top - top,
right : rect.right -left,
bottom : rect.bottom - top
}
}
console.log(getClientRect(box1));
在IE7 和chrome中的输出结果如下：
有了这个方法，可以方便获取页面元素的位置。
var X =getClientRect(box1).left+document.documentElement.scrollLeft; var Y =getClientRect(box1).top+document.documentElement.scrollTop;上一篇： ajax系列之XHR对象的理解