Znajdź X/Y elementu HTML z JavaScript

Question

Jak mogę znaleźć współrzędne XY elementu HTML (DIV) z JavaScript, jeśli nie zostały jawnie ustawione?

Answer 1

Może to być trudne w zależności od przeglądarki i wersji. Sugerowałbym użycie jQuery i wtyczki pozycji.

Answer 2

Nie jestem pewien, czego potrzebujesz, a takie rzeczy zawsze są względne (ekran, okno, dokument). Ale kiedy potrzebne do tego dowiedzieć, znalazłam tę witrynę pomocne: http://www.mattkruse.com/javascript/anchorposition/source.html

I ja także, że ktoś plugin etykietka wykonana dla jQuery miał wszelkiego rodzaju ciekawych wgląd do x, sztuczki pozycjonowania y (spojrzeć na jego rzutni klasa i podstawowa obsługa jQuery zapewnia to). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Można użyć biblioteki takie jak Prototype lub jQuery, można też użyć this handy function:

Zwraca tablicę.

myPos = findPos(document.getElementById('something')) 
x = myPos[0] 
y = myPos[1] 

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

Answer 4

Oto jak to zrobić:

// Based on: http://www.quirksmode.org/js/findpos.html 
var getCumulativeOffset = function (obj) { 
    var left, top; 
    left = top = 0; 
    if (obj.offsetParent) { 
     do { 
      left += obj.offsetLeft; 
      top += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     x : left, 
     y : top 
    }; 
}; 

Answer 5

Na co warto, oto rekurencyjna wersja:

function findPos(element) { 
    if (element) { 
    var parentPos = findPos(element.offsetParent); 
    return [ 
     parentPos.X + element.offsetLeft, 
     parentPos.Y + element.offsetTop 
    ]; 
    } else { 
    return [0,0]; 
    } 
} 

Answer 6

Możesz dodać dwie właściwości do Element.prototype dostać góra/lewo dowolnego elementu.

window.Object.defineProperty(Element.prototype, 'documentOffsetTop', { 
    get: function() { return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0); } 
}); 

window.Object.defineProperty(Element.prototype, 'documentOffsetLeft', { 
    get: function() { return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0); } 
}); 

Oto demo porównując wyniki jQuery offset().top i .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/