Question

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

所以我在jquery中有这两个函数非常有用

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

我已经查找了javascript等价物的每个地方。我甚至看过他们的实现细节但是我不想要我们正确的副本，因为这与仅仅使用它们自己的功能是一样的。

是否有人知道任何会使我获得这些函数的相同或类似返回值的函数？

Answer 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

Answer 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;
}

Answer 3

我用

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

我刚刚参与其中，这对我来说是最好的。

简单的Javascript复制到$ .offset和$ .position

3 个答案: