通過javascript獲取元素的位置

我見過一打腳本，可以捕獲頁面中元素/對象的x和y位置。但是，當網頁在主體或其他元素，絕對/相對元素上使用邊距時，我總是遇到捕獲x和y的問題。通過javascript獲取元素的位置

是否有解決方案，它提供了確切的位置，無論使用何種邊距或填充。

2009-11-20 Johnny

我用下面的代碼移動DIV框跟隨光標在這個Web IME site

function xy(x) { 
    o = document.getElementById(x); 
    var l =o.offsetLeft; var t = o.offsetTop; 
    while (o=o.offsetParent) 
     l += o.offsetLeft; 
    o = document.getElementById(x); 
    while (o=o.offsetParent) 
     t += o.offsetTop; 
    return [l,t]; 
}

它返回一個數組[左，上]，

來源

2009-11-20 10:35:45 YOU

嗨馬克，感謝您的代碼，但是當頁面有一個邊緣在b ody，這個職位不再有效，你有解決方案嗎？在此先感謝 – Johnny 2009-11-20 12:22:12

如何將'document.body.offsetLeft'和'document.body.offsetTop'添加到返回值？ – YOU 2009-11-20 13:03:02

無論身體利潤率如何，這應該很好。確保你使用的是標準模式的doctype。在怪癖中，所有投注都關閉。 – bobince 2009-11-20 13:25:08

獲取確切位置只需將offsetLeft和offsetTops遞歸地添加到offsetParents：

function getPos(ele){ 
    var x=0; 
    var y=0; 
    while(true){ 
     x += ele.offsetLeft; 
     y += ele.offsetTop; 
     if(ele.offsetParent === null){ 
      break; 
     } 
     ele = ele.offsetParent; 
    } 
    return [x, y]; 
}

順便說一句，這個解決方案可能會比the other solution above跑兩倍，因爲我們只循環一次。

來源

2013-05-25 18:51:22 Pacerier

@Yous代碼可以大大簡化，使他們大致相同，而他會更簡潔。 – Seiyria 2014-08-08 16:49:31

你的代碼是徹頭徹尾的壞，我已經在Pacerier的一些改進給，所以我會後我自己的答案：

function getPos(el, rel) 
{ 
    var x=0, y=0; 
    do { 
     x += el.offsetLeft; 
     y += el.offsetTop; 
     el = el.offsetParent; 
    } 
    while (el != rel) 
    return {x:x, y:y}; 
}

如果只是作爲getPos(myElem)將返回地球上的位置。如果包含第二個元素作爲參數（即getPos(myElem, someAncestor)），該元素是第一個元素（至少在某處的上游）的祖先/父級，則它將給出相對於該祖先的位置。如果rel沒有給出（即留undefined），然後有目的地使用的!=代替!==因爲當el到達null和rel是undefined一樣，所以在非嚴格的平等是有目的的，應立即停止，不改變它。它還返回一個對象，因爲它比使用數組的可讀性要高一些（所以你可以像getPos().x這樣做）。

這是從Pacerier的解決方案中派生出來的，所以如果你想要這個，請考慮提高他的效率。

來源

2016-02-15 19:44:47

offsetParent等補償功能是老了......使用getBoundingClientRect 功能......使用：

function getAbsPosition(element) { 
    var rect = element.getBoundingClientRect(); 
    return {x:rect.left,y:rect.top} 
}

現在你可以使用它像這樣

<div style="margin:50px;padding:50px;" id="myEl">lol</div> 
<script type="text/javascript"> 
    var coords = getAbsPosition(document.getElementById('myEl')); 
    alert(coords.x);alert(coords.y); 
</script>

不要擔心...無論多少保證金或位置或填充元素，它總是工作

來源

2016-11-21 16:01:26

通過javascript獲取元素的位置

回答

相關問題