到$.offset和$.position的普通Javascript复制

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

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

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

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

---

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

您可以使用类似的方法（它不检查元素的存在性）

函数getOffset（元素、目标）{ var element=document.getElementById（元素）， target=target？document.getElementById（目标）：窗口； var offset={top:element.offsetTop，left:element.offsetLeft}， 父元素=element.offsetParent； while（parent！=null&&parent！=target）{ offset.left+=parent.offsetLeft； offset.top+=parent.offsetTop； parent=parent.offsetParent； } 返回偏移量； } var tmp=getOffset（'element'，'parent'）； 警报（'到父顶部的偏移量='+tmp.top+'和左侧='+tmp.left）； var tmp=getOffset（'element'）； 警报（'到窗口顶部的偏移量='+tmp.top+'和左侧='+tmp.left）

#父级{
位置：相对位置；
顶部：50px；
左：50px；
边框：1px纯红；
宽度：50%；
}
#元素{
位置：相对位置；
顶部：25px；
左：-25px；
边框：1px纯蓝色；
宽度：50%；
}

试验

当我没有实现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我不支持下面的任何内容ie9@SeekingTruth你不是唯一一个使用SO答案的人：）可能重复的