element.getBoundingClientRect() 返回元素尺寸和相对浏览器视窗位置（宽高、上下左右距离边缘、左上角坐标）

最新推荐文章于 2025-04-03 09:02:21 发布

灵灵7

最新推荐文章于 2025-04-03 09:02:21 发布

阅读量2k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_41796631/article/details/89599711

版权

js 专栏收录该内容

67 篇文章

订阅专栏

element.getBoundingClientRect() 方法返回一个DOMRect对象，包含元素的宽、高、以及相对于视口的位置信息。该方法适用于获取元素边框、margin等详细尺寸。当网页滚动时，rect对象的y坐标会随页面滚动而改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用法：

object.getBoundingClientRect( ) 返回一个对象。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。

rect() 返回的 width 和 height 包括元素的边框。 rect ().width=width+border*2 , rect ().height=height+border*2
除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

例子说明

1. 用 document.documentElement 返回网页的根节点（<html>）

2. 执行 object.getBoundingClientRect( ) 会得到元素的 top、right、bottom、left、width、height 属性，这些属性以一个对象的方式返回。

<html>
<head>
    <style>
        :checked{
            color:red}
    </style>
</head>

<body>
<button onclick="cli()">
    点击
</button>

<script>
function cli(){
    var h=document.documentElement
    var info=h.getBoundingClientRect()
        
    console.log(h)
    console.log(info)
    console.log(info.width)
    }
</script>
</body>
</html>

body 元素的 rect 盒子

查看body元素的rect 盒子发现，body 元素在默认情况下，margin=8px（chrome 浏览器）

var body=document.getElementById("body")
var bodyinfo=body.getBoundingClientRect()

div 元素的 rect 盒子

一、rect 盒子的 width 和height

rect( ) 返回的width，是元素的宽+左右两边边边框的值： rect().width=width +border*2
rect( ) 返回的height，是元素的高+上下边框的值： rect().height=height +border*2

<html>
<head>
    <style>
html{
    background-color:grey;
    margin:0 0;
}

div{
    position:relative;
    color:yellow;
    top:0;
    left:0;
    width:100px;
    height:100px;
    border:solid 10px
}
    </style>
</head>

<body id="body">
    <div id="div">一个元素</div>
    <button onclick="cli()">
    点击
</button>

<script>
function cli(){
    var div=document.getElementById("div")
    var divinfo=div.getBoundingClientRect()

    console.log(divinfo)
    }
</script>
</body>
</html>