，如何獲得一個元素

之類的標題說，如何讓元素的X，相對於y位置，以他們在網頁中的位置和它們的定位方案，例如絕對值，相對值等，如何獲得一個元素

2011-05-26 dave

的位置

使用jQuery：

var $elt = $('select an element however'), 
    cssPosition = $elt.css('position'), 
    offset = $elt.offset(), 
    top = offset.top, 
    left = offset.left;

沒有jQuery的，使用Quirksmode's findPos function：

var elt = document.getElementBy..., 
    pos = findPos(elt), 
    top = pos[1], 
    left = pos[0];

獲取計算CSS position值無庫another can of worms。它歸結爲：

element.currentStyle（IE）
getComputedStyle(element)（真正的瀏覽器）

來源

2011-05-26 23:03:12

我很欣賞評論，但是......我的答案是怎麼回事_not_ JavaScript？ jQuery是JavaScript，我也展示瞭如何在沒有jQuery的情況下做到這一點。 – 2011-05-26 23:06:50

jQuery的定位並不總是正確的，PPK的版本很簡單 - 在某些情況下它會失敗。瀏覽器有各種各樣的定位怪癖，IE的嚴格，compat和quirks模式增加了混合。保持簡單，生活更容易。 – RobG 2011-05-27 00:50:40

@RobG所以你有什麼建議呢？我從來沒有真正遇到過jQuery算法的問題。 – 2011-05-31 16:57:40

在現代瀏覽器，getBoundingClientRect和getClientRects會給你RECT對象描述你的元素。見https://developer.mozilla.org/en/DOM/element.getBoundingClientRect和https://developer.mozilla.org/en/DOM/element.getClientRects

如果你有IE8的工作，那麼你就必須做在不同的瀏覽器不同的事情得到正確的答案（如對象檢測getBoundingClientRect和依傍一些其他的方法，如果它不存在）。

jQuery offset()計算和Quirksmode findPos將在任何執行子像素定位的瀏覽器（例如Firefox或IE9）中給出不正確的答案，因爲它們會將答案四捨五入爲整數個像素。根據你在做什麼，這可能會也可能不會。

來源

2011-05-27 03:19:20

看看這個

JS：

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     curleft = obj.offsetLeft 
     curtop = obj.offsetTop 
     while (obj = obj.offsetParent) { 
      curleft += obj.offsetLeft 
      curtop += obj.offsetTop 
     } 
    } 
    return [curleft,curtop]; 
}

HTML：

<div id="ser">&nbsp;TEST</div>

回電：

alert(findPos(document.getElementById('ser')));

我希望它對您有所幫助

來源

2011-06-01 12:35:54

僅供參考：該片段包含錯誤。變數「curtop」正在污染全球範圍。我剛剛在quirksmode.org上寫了一封關於它的文章。 http://www.quirksmode.org/js/findpos.html – 2014-08-12 04:21:46

，如何獲得一個元素

回答

相關問題