Was ist der Unterschied zwischen „offsetWidth', „clientWidth', „scrollWidth' und ihren Höhengegenstücken?

OffsetWidth, clientWidth, scrollWidth und -Height verstehen

Die Unterschiede zwischen offsetWidth, clientWidth, scrollWidth und ihren Gegenstücken in der Höhe zu verstehen, kann eine Herausforderung sein. Ziel dieses Artikels ist es, eine umfassende Erklärung dieser Eigenschaften mit visuellen Hinweisen bereitzustellen und zu zeigen, wie sie zur Berechnung der Bildlaufleistenbreiten verwendet werden können.

CSS-Boxmodell und DOM-Eigenschaften

Das CSS Das Box-Modell, das die Abmessungen eines Elements auf einer Webseite definiert, kann komplex sein, insbesondere wenn es um scrollende Inhalte geht. Um die Bestimmung der Abmessungen eines Elements mithilfe von JavaScript zu vereinfachen, verfügt jedes Element über sechs DOM-Eigenschaften:

• offsetWidth, offsetHeight: Beinhaltet alle Rahmen und die Breite/Höhe des Elements.
• clientWidth, clientHeight: Stellt den sichtbaren Teil der Box dar Inhalt, ohne Rahmen und Bildlaufleisten, aber einschließlich Polsterung.
• scrollWidth, scrollHeight: Bezeichnet die Größe des gesamten Inhalts der Box, einschließlich der Teile, die außerhalb des Bildlaufbereichs verborgen sind.

Visuelle Darstellung

[Bild der CSS2-Box Modell]

Berechnung der Breite der Bildlaufleiste

Die Eigenschaft offsetWidth, die die Breite der Bildlaufleiste berücksichtigt, kann verwendet werden, um die Breite der Bildlaufleiste mithilfe der folgenden Formel zu bestimmen:

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

Allerdings können Rundungsfehler auftreten, da offsetWidth und clientWidth immer ganze Zahlen sind, während die tatsächlichen Größen Bruchzahlen haben können Werte.

Alternative Berechnung der Bildlaufleistenbreite (Chrome)

In Chrome kann die Bildlaufleistenbreite mit der folgenden Formel berechnet werden:

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

Allerdings ist diese Formel Funktioniert in anderen Browsern möglicherweise nicht zuverlässig, da sich Auffüllungen und Bildlaufleisten unterscheiden.

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