Frage Ruft die Position (X, Y) eines HTML-Elements ab


Ich möchte wissen, wie man die X- und Y-Position von HTML-Elementen wie z img und div in JavaScript.


1007
2018-01-14 09:35


Ursprung


Antworten:


Der richtige Ansatz ist zu verwenden element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer hat dies unterstützt, solange Sie wahrscheinlich kümmern und es wurde schließlich standardisiert CSSOM Ansichten. Alle anderen Browser haben es übernommen vor langer Zeit.

Einige Browser geben auch die Eigenschaften height und width zurück, obwohl dies nicht standard ist. Wenn Sie Bedenken hinsichtlich der Kompatibilität mit älteren Browsern haben, überprüfen Sie die Revisionen dieser Antwort auf eine optimierte Implementierung.

Die von. Zurückgegebenen Werte element.getBoundingClientRect() sind relativ zum Ansichtsfenster. Wenn Sie es relativ zu einem anderen Element benötigen, ziehen Sie einfach ein Rechteck von dem anderen ab:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

1303
2017-07-09 14:06



Die Bibliotheken gehen ein wenig in die Länge, um genaue Offsets für ein Element zu erhalten.
Hier ist eine einfache Funktion, die unter allen Umständen, die ich ausprobiert habe, funktioniert.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 

256
2018-01-14 10:04



Dies funktionierte für mich (modifiziert von der am höchsten gewählten Antwort):

function getOffset(el) {
  rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  }
}

Mit diesem können wir anrufen

getOffset(element).left

oder

getOffset(element).top

137
2018-01-29 18:46



Wenn Seite mindestens einen "DIV" enthält, löst die Funktion, die von mouw gegeben wird, den "Y" -Wert über die aktuellen Seitengrenzen hinaus aus. Um die genaue Position zu finden, müssen Sie sowohl "offsetParent" als auch "parentNode" verarbeiten.

Probieren Sie den folgenden Code (es ist für FF2 überprüft):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};


29
2017-08-12 20:14



Sie können zwei Eigenschaften hinzufügen Element.prototype um den oberen / linken Rand eines Elements zu erhalten.

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

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

Dies wird so genannt:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

Hier ist eine Demo, die die Ergebnisse mit denen von jQuery vergleicht offset().top und .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/


28
2018-01-14 08:57



HTML-Elemente in den meisten Browsern haben:

offsetLeft
offsetTop

Diese spezifizieren die Position des Elements relativ zu seinem nächsten Elternteil, der ein Layout aufweist. Auf dieses übergeordnete Element kann oft mit der offsetParent-Eigenschaft zugegriffen werden.

IE und FF3 haben

clientLeft
clientTop

Diese Eigenschaften sind weniger üblich, sie geben eine Elementposition mit dem übergeordneten Clientbereich an (der gepolsterte Bereich ist Teil des Clientbereichs, jedoch nicht der Rand und der Rand).


25
2018-01-14 09:43



Um die Position relativ zu der Seite effizient und ohne Verwendung einer rekursiven Funktion abzurufen: (beinhaltet auch IE)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

21
2017-07-26 01:49



Wie wäre es mit so etwas, wenn Sie die ID des Elements übergeben und es die linke oder obere Seite zurückgibt, können wir sie auch kombinieren:

1) finde links

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) finden Sie oben

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

oder 3) Finden Sie links und oben zusammen

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

18
2018-05-22 13:09



Sie könnten besser bedient werden, indem Sie ein JavaScript-Framework verwenden, das Funktionen hat, um solche Informationen (und vieles mehr!) Browserunabhängig zurückzugeben. Hier sind ein paar:

Mit diesen Frameworks können Sie Folgendes tun: $('id-of-img').top um die Y-Pixel-Koordinate des Bildes zu erhalten.


17
2018-01-14 09:47