盒子模型-坑爹的Offset

最新推荐文章于 2023-11-30 16:28:41 发布

ZHgogogoha

最新推荐文章于 2023-11-30 16:28:41 发布

阅读量321

点赞数

分类专栏：前端 # JS

本文链接：https://blog.csdn.net/ZHgogogoha/article/details/108048612

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

Offset

jQuery@3.5.1 中有一个API,$(el).offset()可以用于获取元素相对于整个网页的左、上边偏移量。
图片截取自MDN
在这里插入图片描述
我们看看jQuery内部是如何实现的。（省去了一些兼容处理，只关注核心API）

offset: function (options) {
            var rect, win,
                elem = this[0];

            if (!elem) {
                return;
            }

            // Get document-relative position by adding viewport scroll to viewport-relative gBCR
            rect = elem.getBoundingClientRect();
            win = elem.ownerDocument.defaultView;
            return {
                top: rect.top + win.pageYOffset,
                left: rect.left + win.pageXOffset
            };
        }

这有两个不太常见的属性
MDN：

Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。

Document.defaultView 在浏览器中，该属性返回当前 document 对象所关联的 window 对象，如果没有，会返回 null。

rect = elem.ownerDocument.defaultView; 某种情况下可以看作就是window对象。

Element.getBoundingClientRect()

在这里插入图片描述
原理大概就是这样，当时觉得有点奇怪，不是有一个node.offsetTop吗，为什么非要读取两个属性值？

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .parent {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-top: 30px;	/*key value*/
            padding: 10px;		/*key value*/
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: greenyellow;
        }
        html {
            height: 2000px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="son"></div>
</div>
<script>
    let son = document.querySelector('.son');
    console.log(`getBoundingClient: ${son.getBoundingClientRect().top}`);
    console.log(`offsetTop: ${son.offsetTop}`);
    console.log(`scrollY: ${window.scrollY}`);
</script>
</body>
</html>

这么一看，好像没有什么问题。
在这里插入图片描述

offsetTop

mdn:
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

简而言之，offsetLeft会找最近的定位元素或者body元素当作偏移量参考。

我们打印一下son的offsetParent
在这里插入图片描述
给parent加一个position: relative定位

原来如此…看来offsetLeft/offsetTop使用得小心。

扩展

除了jQuery的解决方法，还有没有其他解决方法？
利用刚才的offsetParent就可以！

注意document.window.offsetParent返回null
在这里插入图片描述
利用这个特性搭配offsetLeft也可以算出左边距。

let parent = son.offsetParent,
    offsetL = son.offsetLeft;

while(parent) {
    offsetL += parent.offsetLeft;
    parent = parent.offsetParent;
}

但是写到这还没完，offsetLeft获取的是外边框到offsetParent的距离，如果offsetParent具有外边框那不是算少了？
我们给parent增加外边框

.parent {
     width: 300px;
     height: 300px;
     border: 20px solid #333;
     background-color: red;
     margin-top: 30px;
     padding: 10px;
     position: relative;
 }

在这里插入图片描述
clientLeft可以获取元素的左边框大小。
利用这个属性完善我们的代码

let parent = son.offsetParent,
    offsetL = son.offsetLeft;

while(parent) {
    offsetL += parent.offsetLeft + parent.clientLeft;
    parent = parent.offsetParent;
}

收工。

ZHgogogoha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型-坑爹的Offset

OffsetjQuery@3.5.1 中有一个API,$(el).offset()可以用于获取元素相对于整个网页的左、上边偏移量。图片截取自MDN我们看看jQuery内部是如何实现的。（省去了一些兼容处理，只关注核心API）offset: function (options) { var rect, win, elem = this[0]; if (!elem) { return;
复制链接

扫一扫

专栏目录