JavaScript实现jQuery的offset()方法示例

JavaScript实现jQuery的offset()方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。这个方法可以获取一个元素在文档中的相对位置（相对于文档的距离），也可以设置元素的位置。

// 获取元素的位置
function getOffset(ele) {
    var offset = {
        left: ele.offsetLeft,
        top: ele.offsetTop
    };
    var parent = ele.offsetParent;
    while (parent) {
        offset.left += parent.offsetLeft;
        offset.top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return offset;
}

// 设置元素的位置
function setOffset(ele, offset) {
    ele.style.left = offset.left + 'px';
    ele.style.top = offset.top + 'px';
}

以上是使用 JavaScript 实现 jQuery 的 offset() 方法的示例，其中 getOffset() 方法用来获取元素的位置，setOffset() 方法用来设置元素的位置。

在 getOffset() 方法中，使用了 offsetLeft 和 offsetTop 两个属性，这两个属性可以获取元素相对于它的最近祖先元素的位置，所以我们要获取元素相对于文档的位置，就需要一层层往上遍历，直到把所有的祖先元素的位置加起来，就可以得到元素相对于文档的位置。

setOffset() 方法则是相反的，我们可以把元素的 left 和 top 属性设置为指定的值，以改变元素的位置。

使用 JavaScript 实现 jQuery 的 offset() 方法，可以让我们更好地控制元素的位置，而不需要依赖 jQuery 库。