响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版例5-3 getBoundingClientRect()

本文主要是介绍响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版例5-3 getBoundingClientRect()，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码

<!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的大小都是相对于文档视图的左上角来计算的。