代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getBoundingClientRect()</title>
</head>
<script>function getRect(){var obj = document.getElementById('example'); //获取元素对象var objRect = obj.getBoundingClientRect(0); //获取按钮位置// 当调用该方法时弹出元素的信息(上、右、下和左边界分别相对浏览器视图的位置)alert('top:'+objRect.top+',right:'+objRect.right+',bottom:'+objRect.bottom+',left:'+objRect.left);}
</script><body>
<div style="text-align: center;"><button id="example" onmousemove="getRect()">返回本按钮距离浏览器左上角的值</button>
</div>
</body>
</html>
上述代码中:
第18行代码是给< button >标签绑定onmousemove事件的getRect()函数,并在第8~13行代码中定义了getRect(0函数来获取鼠标移上按钮时,按钮与浏览器左上角之间的距离值。
运行效果
当鼠标悬停在按钮上时,弹出框显示具体的值。
使用getBoundingClientRect()方法可以获得DOM元素到浏览器可视范围的距离,用于获得页面中某个元素的左、上、右和下边界分别相对浏览器视图的位置,或者可以理解为获取一个Element元素的坐标。
getBoundingClientRect()方法返回一个Object对象,该对象有6个属性:top、left、right、bottom、width、height。其中,width和height是元素自身的宽和高;top、left、right、bottom的大小都是相对于文档视图的左上角来计算的。