Uzyskaj pozycję znacznika div / span

103

Czy ktoś może mi pokazać, jak uzyskać pozycję top& elementu lub , gdy nie jest on określony?leftdivspan

to znaczy:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

W powyższym, jeśli to zrobię:

document.getElementById('11a').style.top

Zwracana jest wartość 55px. Jeśli jednak spróbuję tego dla span„12a”, nic nie zostanie zwrócone.

Mam kilka div/ spans na stronie, dla których nie mogę określić top/ leftproperties, ale muszę wyświetlić divbezpośrednio pod tym elementem.

javascript html schmoopy
źródło

100

Ta funkcja poda pozycję x, y elementu względem strony. Zasadniczo musisz przejść przez wszystkie elementy nadrzędne elementu i dodać razem ich przesunięcia.

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

Jeśli jednak chciałeś tylko pozycji x, y elementu względem jego kontenera, wszystko, czego potrzebujesz, to:

var x = el.offsetLeft, y = el.offsetTop;

Aby umieścić element bezpośrednio pod tym, musisz również znać jego wysokość. Jest to przechowywane we właściwości offsetHeight / offsetWidth.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

nickf
źródło

5

Niestety ta metoda zawodzi w Chrome, gdy element znajduje się wewnątrz tabeli z obramowaniem. Nie powiedzie się również w trybie standardowym IE6 z powodu marginesów BODY.

GetFree

1

Tylko ostrzeżenie dla użytkowników tego kodu. Dotyczy to strony, a nie okna. Zwraca tę samą wartość, jeśli użytkownik przewija zawartość za pomocą pasków przewijania. Bądź ostrożny.

Isaac Bolinger,

dzięki @IsaacBolinger właśnie to zauważyłem. Czy ktoś może mi powiedzieć, jak mogę zmienić wartości, gdy zmienia się rozmiar okna lub użytkownik przewija?

David Fariña

@ DavidFariña Użyłem do tego modułu geometrii „dom-geometry” z dojo. Nie wiem, jak to zrobić natywnie.

Isaac Bolinger,

Głos w dół - może to być oczywiste dla bardziej doświadczonych użytkowników, ale nie określono dokładnie, co powinno zostać przekazane w przypadku el (tj. Proszę podać przykładowe użycie).

Matt

184

Możesz wywołać metodę getBoundingClientRect()na odwołaniu do elementu. Następnie można zbadać top, left, righti / lub bottomwłaściwości ...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

Jeśli używasz jQuery, możesz użyć bardziej zwięzłego kodu ...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

Alex
źródło

11

getBoundingClientRect()Należy użyć +1 dla tej odpowiedzi - i to powinna być zaakceptowana odpowiedź! Ale nie potrzebujesz "nowoczesnej przeglądarki", aby to działało, zobacz listę kompatybilności, którą pokazałem tutaj: stackoverflow.com/questions/1480133/… . Działa dobrze w IE 4.0+ (!), Chrome 1.0+, FF 3.0+, Safari 4.0+ i Opera.

Sk8erPeter

25

Zwróć uwagę, że getBoundingClientRect()zwraca wartości względem rzutni, a nie dokumentu. W tym celu chciałbyś czegoś takiego top = el.getBoundingClientRect().top + window.pageYOffset - el.ownerDocument.documentElement.clientTop.

Zack Bloom,

1

Należy również pamiętać, że getBoundingClientRectbierze transformpod uwagę.

ExpExc

Nie jest to dokładne, jeśli pierwsze dziecko nie pozycjonowane bezwzględnie ma margines górny lub lewy margines. Obecnie na tej stronie nie ma dokładnego rozwiązania, więc jeśli ktoś wie, napisz odpowiedź.

Curtis

16

Podczas gdy odpowiedź @ nickf działa. Jeśli nie interesują Cię starsze przeglądarki, możesz użyć tej czystej wersji Javascript. Działa w IE9 + i innych

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

Benjamin Intal
źródło

12

Jak zauważył Alex, możesz użyć jQuery offset (), aby uzyskać pozycję względem przepływu dokumentu. Użyj position () dla jego współrzędnych x, y względem rodzica.

EDIT: Switched document.readydla window.loadponieważ loadczeka na wszystkich elementach więc masz ich rozmiar zamiast po prostu przygotowuje DOM. Z mojego doświadczenia loadwynika, że mniej elementów nieprawidłowo pozycjonowanych w Javascript jest mniej.

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

Dylan Valade
źródło

9

Dla każdego, kto potrzebuje tylko górnej lub lewej pozycji, niewielkie modyfikacje czytelnego kodu @ Nickf załatwią sprawę.

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

i

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

Jens Frandsen
źródło

2

Zdaję sobie sprawę, że to stary wątek, ale odpowiedź @alex musi być oznaczona jako poprawna

element.getBoundingClientRect() jest dokładnym dopasowaniem do jQuery $(element).offset()

Jest kompatybilny z IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

letni
źródło

Musisz uwzględnić przesunięcie przewijania strony

Benjamin Intal,

Uzyskaj pozycję znacznika div / span

Odpowiedzi: