响应式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函数来获取鼠标移上按钮时,按钮与浏览器左上角之间的距离值。

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-3 getBoundingClientRect()_第1张图片
当鼠标悬停在按钮上时,弹出框显示具体的值。
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-3 getBoundingClientRect()_第2张图片
使用getBoundingClientRect()方法可以获得DOM元素到浏览器可视范围的距离,用于获得页面中某个元素的左、上、右和下边界分别相对浏览器视图的位置,或者可以理解为获取一个Element元素的坐标。
getBoundingClientRect()方法返回一个Object对象,该对象有6个属性:top、left、right、bottom、width、height。其中,width和height是元素自身的宽和高;top、left、right、bottom的大小都是相对于文档视图的左上角来计算的。

你可能感兴趣的:(前端,html5,css3)