Was ist der Unterschied zwischen „offsetWidth', „clientWidth' und „scrollWidth' (und ihren Gegenstücken in der Höhe)?

OffsetWidth, clientWidth, scrollWidth und ihre Gegenstücke zur Höhe verstehen

Trotz zahlreicher Anfragen zu StackOverflow und verwirrender oder ungenauer Informationen im Internet ist es ein Verständnis für die Feinheiten von offsetWidth, clientWidth, scrollWidth und ihren Gegenstücken in der Höhe bleibt a Herausforderung.

Definitionen und visuelle Hilfsmittel:

• offsetWidth, offsetHeight: Stellt die Breite und Höhe des visuellen Felds des Elements dar, einschließlich Grenzen. Kann durch Summieren von Breite/Höhe, Abständen und Rändern berechnet werden (für Elemente mit Anzeige: Block).
• clientWidth, clientHeight: Geben den sichtbaren Teil des Inhalts innerhalb des Elements an, ausgenommen Rahmen und Bildlaufleisten, aber einschließlich Polsterung. Kann nicht direkt von CSS abgeleitet werden und variiert je nach Größe der Bildlaufleiste des Systems.
• scrollWidth, scrollHeight: Geben Sie die Gesamtgröße des Inhalts des Elements an, einschließlich versteckter Teile außerhalb des Bildlaufbereichs. Auch abhängig vom Inhalt und kann nicht direkt aus CSS berechnet werden.

[Visualisierung des CSS2-Boxmodells mit beschrifteten Abmessungen]

Berechnung der Bildlaufleistenbreite:

Da offsetWidth die Breite der Bildlaufleiste einschließt, können wir sie mithilfe von berechnen Formel:

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Diese Methode kann jedoch aufgrund der ganzzahligen Natur von offsetWidth und clientWidth zu Rundungsfehlern führen, die bei anderen Zoomstufen als 1 möglicherweise nicht die tatsächlichen Bruchdimensionen widerspiegeln.

Zusätzliche Überlegungen:

Beachten Sie Folgendes Formel:

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

liefert in Chrome keine zuverlässigen Ergebnisse, da Chrome die Breite der Bildlaufleiste von der gemeldeten Breite abzieht. Darüber hinaus rendert Chrome im Gegensatz zu anderen Browsern paddingBottom am Ende des Bildlaufinhalts.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „offsetWidth', „clientWidth' und „scrollWidth' (und ihren Gegenstücken in der Höhe)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!