纯 Javascript 复制到 $.offset 和 $.position答案

【问题标题】：Plain Javascript replication to $.offset and $.position纯 Javascript 复制到 $.offset 和 $.position
【发布时间】：2014-11-04 23:46:32
【问题描述】：

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

所以我在 jquery 中有这两个功能非常有用

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

我到处寻找 javascript 等价物。我什至查看了他们的实现细节，但可惜我不想复制我们的正确副本，因为这与仅使用它们本身的功能相同。

有没有人知道任何可以让我得到这些函数相同或相似返回值的函数？

【问题讨论】：

Determine distance from the top of a div to top of window with javascript的可能重复

标签： javascript reactjs

【解决方案1】：

你可以使用这样的东西（它不检查元素的存在）

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

【讨论】：

我不支持ie9以下的任何东西
@SeekingTruth 你不是唯一一个使用 SO 答案的人 :)

【解决方案2】：

当我没有实现 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;
}

【讨论】：

【解决方案3】：

我用

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

我刚接触这个，这对我来说是最好的。

【讨论】：