DOM基础笔记——getBoundingClientRect() / getClientRects()

最新推荐文章于 2023-04-25 21:34:04 发布

原创最新推荐文章于 2023-04-25 21:34:04 发布 · 534 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文主要探讨了DOM操作中的两个重要方法：getBoundingClientRect()和getClientRects()。getBoundingClientRect()用于获取元素相对于视口的位置及大小信息，返回DOMRect对象。而getClientRects()则返回元素在客户端的多个边界矩形集合。

getBoundingClientRect()

返回元素的大小及其相对于视口的位置。

返回的是DOMRect对象.

width / height	content-box : width + padding + border border-box : width IE9+
x	左边到视口的距离 IE不支持
y	上边到视口的距离 IE不支持
top	上边到视口的距离
bottom	下边到视口的距离
right	右边到视口的距离
left	左边到视口的距离

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .father {
            margin-top: 10px;
            position: relative;
            /* padding: 10px; */
            background-color: grey;
        }
        .div1 {
            position: absolute;
            left: 10px;
            top: 4px;
            width: 200px;
            height: 200px;
            background-color: green;
            border: 1px solid #333;
            padding: 10px;
        }
    </style>