将Javascript复制到$.offset和$.position

Plain Javascript replication to $.offset and $.position

本文关键字：offset position Javascript 复制      更新时间：2023-09-26

我正在为Reactjs构建一个overlay机制，在Reactjs中使用Jquery就像用锤子砸拇指一样。你不会这么做的。

所以我在jquery中有这两个功能，它们对非常有用

window.jQuery(DOMNode).offset();
window.jQuery(elem).position();

我到处寻找javascript等价物。我甚至查看了它们的实现细节，但遗憾的是，我不想复制它们，因为这与只使用它们自己的函数是一样的。

有人知道有什么函数可以让我得到这些函数相同或相似的返回值吗？

您可以使用类似的东西（它不检查元素的存在）

function getOffset(element, target) {
    var element = document.getElementById(element),
        target  = target ? document.getElementById(target) : window;
    var offset = {top: element.offsetTop, left: element.offsetLeft},
        parent = element.offsetParent;
    while (parent != null && parent != target) {
       offset.left += parent.offsetLeft;
       offset.top  += parent.offsetTop;
       parent = parent.offsetParent;
    }
    return offset;
}
var tmp = getOffset('element', 'parent');
alert('Offset to parent top = ' + tmp.top + ' and left = ' + tmp.left);
var tmp = getOffset('element');
alert('Offset to window top = ' + tmp.top + ' and left = ' + tmp.left);
#parent {
    position: relative;
    top: 50px;
    left: 50px;
    border: 1px solid red;
    width: 50%;
}
#element {
    position: relative;
    top: 25px;
    left: -25px;
    border: 1px solid blue;
    width: 50%;
}
<div id='parent'>
    <div id='element'>
        Test
    </div>
</div>

相对于窗口的偏移结果不同于75和25，因为浏览器具有<body>的默认边距，body {margin: 0px;} 可以将其设置为0

当我不实现jquery:时，我使用这些函数来获取元素的坐标

function find_PosX(obj){
    var curleft=0;
    if(obj.offsetParent)
        while(1){
            curleft+=obj.offsetLeft;
            if(!obj.offsetParent)
                break;
                obj=obj.offsetParent;
        }
    else if(obj.x)curleft+=obj.x;
    return curleft;
}
function find_PosY(obj){
    var curtop=0;
    if(obj.offsetParent)
        while(1){
            curtop+=obj.offsetTop;
            if(!obj.offsetParent)
                break;
                obj=obj.offsetParent;
        }
    else if(obj.y)curtop+=obj.y;
    return curtop;
}

我使用

elOffsetTop = el.offsetTop - el.scrollTop + el.parentNode.offsetTop - el.parentNode.scrollTop;
elOffsetLeft = el.offsetLeft - el.scrollLeft + el.parentNode.offsetLeft - el.parentNode.scrollLeft;

我刚刚进入这个领域，这对我来说是最好的。

相关文章：