it-swarm.com.de

Ermittelt die Position eines Div / Span-Tags

Kann mir jemand zeigen, wie ich die top & left Position eines div oder span Elements erhalte, wenn eines nicht angegeben ist?

dh:

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

Wenn ich oben tue:

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

Der Wert von 55px ist zurück gekommen. Wenn ich das jedoch für span '12a' versuche, wird nichts zurückgegeben.

Ich habe eine Reihe von div/spans auf einer Seite, für die ich die top/left -Eigenschaften nicht angeben kann, aber eine div direkt unter diesem Element.

98
schmoopy

Diese Funktion teilt Ihnen die x, y Position des Elements relativ zur Seite mit. Grundsätzlich müssen Sie alle Eltern des Elements durchlaufen und deren Offsets addieren.

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

Wenn Sie jedoch nur die x, y-Position des Elements relativ zu seinem Container haben möchten, brauchen Sie nur Folgendes:

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

Um ein Element direkt unter dieses Element zu platzieren, müssen Sie auch seine Höhe kennen. Dies wird in der Eigenschaft offsetHeight/offsetWidth gespeichert.

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

Sie können die Methode getBoundingClientRect() für einen Verweis auf das Element aufrufen. Dann können Sie die Eigenschaften top, left, right und/oder bottom untersuchen ...

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

Wenn Sie jQuery verwenden, können Sie den prägnanteren Code verwenden ...

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

Während @ nickfs Antwort funktioniert. Wenn Sie ältere Browser nicht mögen, können Sie diese reine Javascript-Version verwenden. Funktioniert in IE9 + und anderen

var rect = el.getBoundingClientRect();

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

Wie Alex bemerkt hat, können Sie jQuery offset () verwenden, um die Position relativ zum Dokumentenfluss abzurufen. Verwenden Sie position () für die XY-Koordinaten relativ zum übergeordneten Element.

BEARBEITEN: document.ready Wurde auf window.load Umgestellt, da load auf alle Elemente wartet, sodass Sie ihre Größe erhalten, anstatt einfach das DOM vorzubereiten. Nach meiner Erfahrung führt load zu weniger falsch in Javascript positionierten Elementen.

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

Für alle, die nur die obere oder linke Position benötigen, reichen geringfügige Änderungen am lesbaren Code von @ Nickf aus.

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

und

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

Mir ist klar, dass dies ein alter Thread ist, aber die Antwort von @alex muss als die richtige Antwort markiert werden

element.getBoundingClientRect() stimmt genau mit jQueries $(element).offset() überein

Und es ist kompatibel mit IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

1
lukeed