Detaillierte Erklärung der HTML-Elementhöhe, OffsetHeight, ClientHeight, ScrollTop usw.

Einige Attribute zu Elementen

Bei der täglichen Entwicklung des Front-Ends müssen wir oft zwangsläufig die Eigenschaften einiger Seiten abrufen oder überwachen. Daher müssen wir oft die Bedeutung einiger Eigenschaften verstehen, um diese Eigenschaften besser nutzen zu können. Im Einzelnen sind dies:

• Größenbezogen: OffsetHeight, ClientHeight, ScrollHeight;
• Offset-bezogen: offsetTop, clientTop, scrollTop, pageYOffset, scrollY;
• Holen Sie sich die relative Ansichtsfensterposition: Element.getBoundingClientRect();
• Holen Sie sich das Stilobjekt des Elements: Window.getComputedStyle(Element);

Definition von Attributen

Informationen zu größenbezogenen Attributdefinitionen:

offsetHeight: Element.offsetHeight ist eine schreibgeschützte Eigenschaft, die den Wert der Höhe px des Elements zurückgibt. Es handelt sich um einen ganzzahligen Wert und es gibt keine Dezimalstelle.

• Versteckte Elemente geben 0 zurück;
• Andere Rückgabewerte: die innere Höhe + Polsterung + Rahmen + Seitenrand + Bildlaufleiste des Elements, jedoch ohne die darin enthaltenen Pseudoelemente ::before oder ::after;

clientHeight: Element.clientHeight ist eine schreibgeschützte Eigenschaft, die den px-Höhenwert des Elements zurückgibt. Es handelt sich um einen ganzzahligen Wert und es gibt keine Dezimalstelle.

• Für Inline-Elemente ohne festgelegten Stil ist der Rückgabewert 0.
• Bei HTML-Elementen oder Textkörpern im Quirks-Modus ist der zurückgegebene Wert die Ansichtsfensterhöhe, also die Höhe des gesamten Seitenansichtsfensters.
• In anderen Fällen: die innere Höhe + Polsterung des Elements, ausgenommen Ränder, Ränder und Bildlaufleisten;

scrollHeight: ist eine schreibgeschützte Eigenschaft. Sie gibt den px-Wert der Höhe des Elements zurück. Es handelt sich um einen ganzzahligen Wert ohne Dezimalstellen.

• Wenn das untergeordnete Element nicht scrollt, ist es dasselbe wie Element.clientHeight
• Wenn das untergeordnete Element scrollbar ist, ist es die Summe der ClientHeight-Höhen aller untergeordneten Elemente + ihrer eigenen Polsterung.

window.innerHeight: (Höhe des Browserfensters, ausgenommen Symbolleisten, Menüs usw., nur die Höhe des sichtbaren DOM-Bereichs)
window.outerHeight: (Höhe des Browserfensters, einschließlich Symbolleisten, Menüs usw., die Höhe des gesamten Browsers)

Über Offset:

offsetTop: eine schreibgeschützte Eigenschaft, die den oberen Abstand eines Elements von der Innenkante des nächstgelegenen relativ positionierten übergeordneten Elements zurückgibt. Bei der tatsächlichen Verwendung kann es aufgrund inkonsistenter relativ positionierter übergeordneter Elemente aufgrund unterschiedlicher Stile zu Kompatibilitätsproblemen kommen.
clientTop: Die Breite des oberen Rahmens
scrollTop:

• Bei Scroll-Elementen ist dies die Distanz, die gescrollt wurde.
• Für HTML ist es window.scrollY

window.scrollY, Alias: window.pageYOffset, die Distanz, die der Stammknoten vertikal gescrollt hat

Relevante Daten für die Entwicklung erforderlich

Holen Sie sich die Höhe des sichtbaren Bereichs der gesamten Seite: [Die Höhe außerhalb des sichtbaren Bereichs ist nicht erforderlich]

const height = Fenster.innereHöhe
    || Dokument.documentElement.clientHeight
    || Dokument.Body.ClientHeight;

Höhe der gesamten Seite ermitteln: [auch außerhalb des sichtbaren Bereichs]

const Höhe = Dokument.Dokumentelement.OffsetHeight
    || Dokument.Body.OffsetHeight;

Ermitteln Sie die vertikale Scrollhöhe der gesamten Seite:

const scrollTop = document.documentElement.scrollTop
    || Dokument.Body.ScrollTop;

Ermitteln Sie den Abstand des Elements relativ zur Spitze des Stammknotens:

// Für Elemente, die relativ zum Stammknoten positioniert sind const top = Element.offsetTop;

// Für Elemente, die nicht relativ zum Stammknoten positioniert sind, müssen Sie eine Schleife ausführen, um getElementTop(element) { zu erhalten.
      let tatsächlichesTop = element.offsetTop
      let aktuell = element.offsetParent

      während (aktuell !== null) {
        tatsächlicheOberseite += aktueller.OffsetOberseite
        aktuell = aktuell.offsetParent
      }
      tatsächliche Top zurückgeben
}

// Eine andere Methode ist Scrolldistanz + Distanz vom oberen Rand des Ansichtsfensters const top = Element.getBoundingClientRect().top + window.scrollY;

Ermitteln Sie den oberen Abstand des Elements im Verhältnis zum sichtbaren Bereich:

const top = Element.getBoundingClientRect().top;

Legen Sie die vertikale Scrollposition der gesamten Seite fest:

const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
wenn (isCSS1Compat) {
    Dokument.documentElement.scrollTop = 100;
} anders {
    Dokument.Body.ScrollTop = 100;
}

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Höhe, OffsetHeight, ClientHeight, ScrollTop usw. von HTML-Elementen. Weitere relevante Inhalte zu Höhe, OffsetHeight, ClientHeight und ScrollTop finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!