Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung, wie man mithilfe von JavaScript-Code linke und obere Werte erhält

Ausführliche Erklärung, wie man mithilfe von JavaScript-Code linke und obere Werte erhält

巴扎黑
巴扎黑Original
2017-08-14 13:51:202119Durchsuche

Der folgende Editor stellt Ihnen drei Methoden vor, um den linken Wert und den oberen Wert in nativem JS zu erhalten. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf

Wenn Sie js zum Erstellen dynamischer Effekte verwenden, müssen Sie normalerweise die linken und oberen Attributwerte in der absoluten Positionierung des Elements ermitteln. Um beispielsweise eine Kollisionsanzeige zu erstellen, müssen Sie ständig die oberen und linken Attributwerte des Elements abrufen.

Wichtige Hinweise: Das Element, das den Wert annimmt, muss das absolute Positionierungsattribut position:absolute festlegen, um den linken Wert zu erhalten.

Die erste Methode ist relativ einfach, dh direkt über obj.style.left und obj.style.top, aber Es gibt Einschränkungen. Diese Erfassungsmethode kann nur die linken und oberen Attributwerte des Inline-Stils abrufen, jedoch nicht die linken und oberen Attributwerte des Stil-Tags und keine externen Referenzen.

Die zweite Methode ist schreibgeschützt. Es gibt Kompatibilitätsprobleme. Sie können window.getComputedStyle(object, null) verwenden .left-Methode, um die linken und oberen Attributwerte des Elements abzurufen. Im IE-Browser wird die Methode obj.currentStyle.left verwendet, um den Attributwert abzurufen.

Die dritte Methode, verwenden Sie obj.offsetLeft, um den linken Attributwert des Objekts abzurufen, und verwenden Sie obj.offsetTop, um den oberen Attributwert des Objekts abzurufen .

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mithilfe von JavaScript-Code linke und obere Werte erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn