getBoundingClientRect方法获取盒子的相关长度属性

veggie_a_h

已于 2022-03-25 21:52:14 修改

阅读量569

点赞数 1

分类专栏：前端知识点基础前端面试文章标签： javascript 前端 html

于 2022-03-22 22:21:17 首次发布

本文链接：https://blog.csdn.net/wanghe1111_/article/details/123673446

版权

前端面试同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端知识点基础

21 篇文章 0 订阅

订阅专栏

js的getBoundingClientRect方法获取盒子的相关长度属性

getBoundingClientRect可以获取盒子本身的宽度和高度以及盒子的四个边框即top、bottom、right、left到浏览器左窗口和上窗口的距离。

通过rect = domNode.getBoundingClientRect()来获取盒子的相关属性对象。

rect.left: 50 //盒子左边框到浏览器当前左窗口的距离
rect.right: 350 // 盒子又边框到浏览器当前左窗口的距离
rect.top: 50 // 盒子的上边框到浏览器当前上窗口的距离
rect.bottom: 350 //盒子的下边框到浏览器当前上窗口的距离
rect.width: 300 //盒子的宽度
rect.height: 300 //盒子的高度
rect.x: 50
rect.y: 50//（x, y）是盒子的左顶点到浏览器当前窗口左顶点的距离

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 300px;
        height: 300px;
        border: 2px solid pink;
        margin: 50px 50px;
        box-sizing: border-box;
    }
</style>

<body>
    <div></div>
</body>
<script>
    let div = document.querySelector("div")
    let rect = div.getBoundingClientRect()
    console.log(rect);
    /*
    left: 50 //盒子左边框到浏览器左窗口的距离
    right: 350 // 盒子又边框到浏览器左窗口的距离
    top: 50 // 盒子的上边框到浏览器上窗口的距离
    bottom: 350 //盒子的下边框到浏览器上窗口的距离
    width: 300  //盒子的宽度
    height: 300 //盒子的高度
    x: 50 
    y: 50//（x, y）坐标是盒子的左顶点到浏览器窗口左顶点的距离
    */
    console.log(div.scrollHeight);
</script>

</html>