HTML DOM Element offsetTop-Eigenschaft

Definition und Verwendung

offsetTop Diese Eigenschaft gibt die Position相对于Eltern (in Pixel) an. Diese Eigenschaft ist schreibgeschützt.

Der Rückgabewert umfasst:

  • Position und Außenabstand des Elements
  • Oberer Innenabstand, Scrollbalken und Rahmen des Elternteils

Weitere Informationen:CSS-Box-Modell-Tutorial

offsetParent

Alle Blockelemente melden die Verschiebungen relativ zum Verschiebungs-Eltern:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Verschiebungs-Eltern bezieht sich auf den nächsten Vorfahren mit einer nicht statischen Position.

Falls kein Verschiebungs-Eltern existiert, ist der Verschiebungsabstand relativ zum Haupttext der Dokument.

Weitere Informationen:

offsetLeft-Eigenschaft

offsetWidth-Eigenschaft

offsetHeight-Eigenschaft

offsetParent-Eigenschaft

clientTop-Eigenschaft

clientLeft-Eigenschaft

clientWidth-Eigenschaft

clientHeight-Eigenschaft

Beispiel

Beispiel 1

Erhalten Sie die offsetTop-Position von "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Selbst ausprobieren

Beispiel 2

Erhalten Sie die Position von "myDIV":

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Selbst ausprobieren

Beispiel 3

Erstellen Sie eine festsitzende Navigationsleiste:

// Erhalten Sie die Navigationsleiste
const navbar = document.getElementById("navbar");
// Erhalten Sie die Position der Navigationsleiste
const sticky = navbar.offsetTop;
// Fügen Sie die sticky-Klasse zur Navigationsleiste hinzu, wenn Sie an ihre Scrollposition gelangen. Entfernen Sie die sticky-Klasse, wenn Sie die Scrollposition verlassen.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Selbst ausprobieren

Syntax

Rückgabe der Top-Position:

element.offsetTop

Rückgabewert

Typ Beschreibung
Zahl Die obere Position des Elements in Pixeln.

Browserunterstützung

Alle Browser unterstützen dies element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung