HTML DOM getBoundingClientRect()方法

HTML DOM getBoundingClientRect()方法可以获取某个元素相对于视口的位置信息，它是通过计算该元素对于浏览器 viewport 的 left、top、right 和 bottom 值来实现的。使用该方法可以方便地获取元素在页面中的位置，这对于网页布局和动画效果开发非常有用。

方法语法

DOMRectElement getBoundingClientRect();

方法参数

无

方法返回值

返回一个 DOMRect 对象，其中包含top、bottom、left、right等位置信息属性。

两条示例说明：

示例1：获取元素相对于视口的位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>getBoundingClientRect()方法示例</title>
    <style>
        #box{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <p id="position"></p>
    <script>
        var box = document.getElementById("box");
        var position = document.getElementById("position");

        var rect = box.getBoundingClientRect(); //获取元素相对于视口的位置

        position.innerHTML = "left: " + rect.left + "    " + "top: " + rect.top;
    </script>
</body>
</html>

首先，我们在html中定义一个id为box的div元素，设置其相对位置属性为absolute，现将其放置于距离文档顶部50px，左侧50px的位置。接着，我们创建一个p元素用于显示获取到的元素位置信息。在JavaScript中使用getBoundingClientRect()方法获取box元素相对于视口的位置，最后将位置信息显示在p元素中。

刷新页面后，我们可以看到p元素中显示了box元素相对于视口的位置信息，left: 50 top: 50。这告诉我们，box元素距离视口左侧50个像素，距离视口顶部50个像素。

示例2：通过计算滚动条位置，获取元素绝对位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>getBoundingClientRect()方法示例</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        #box{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <p id="position"></p>
    <script>
        var box = document.getElementById("box");
        var position = document.getElementById("position");

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        //获取滚动条位置，兼容浏览器差异

        var rect = box.getBoundingClientRect();
        //获取元素相对于视口的位置

        position.innerHTML = "left: " + (rect.left+scrollLeft) + "    " + "top: " + (rect.top+scrollTop);
        //计算元素绝对位置
    </script>
</body>
</html>

在示例2中，我们在html中定义了一个id为box的div元素，同样设置其相对位置属性为absolute，将其放置于距离文档顶部50px，左侧50px的位置。在CSS中，我们定义了html和body元素的margin和padding均为0，以便适应不同浏览器的差异。

在JavaScript中，我们使用document.documentElement.scrollTop和document.body.scrollTop获取垂直滚动条的位置，使用document.documentElement.scrollLeft和document.body.scrollLeft获取水平滚动条位置，并将这些值分别存储在scrollTop和scrollLeft变量中。接着，我们使用getBoundingClientRect()方法获取box元素相对于视口的位置，将其存储在rect变量中。最后，我们计算出了box元素在文档中的绝对位置，将其显示在p元素中。

刷新页面后，我们可以看到p元素中显示了box元素的绝对位置信息，left: 50 top: 50。这告诉我们，即使我们通过滚动条将box元素滚动到屏幕外面，该方法仍然可以准确地获取box元素在文档中的绝对位置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML DOM getBoundingClientRect()方法 - Python技术站

HTML DOM getBoundingClientRect()方法

方法语法

方法参数

方法返回值

两条示例说明：

相关文章