das merke ich offsetwidth
ist eine etwas größere Zahl. Ähnlich für style.height
und offsetheight
.
Unterschied zwischen style.width und offsetwidth in HTML?
yeeen
sol0mka
offsetWidth
gibt die Breite des berechneten Elements zurück, während el.style.width
gibt nur die in . definierte Breiteneigenschaft zurück element.style durch javascript
und spiegelt nicht die Abmessungen des realen Elements wider.
Dies bedeutet, dass Sie versuchen, eine Breite des Elements zu erhalten, indem Sie auf el.style
, du wirst wahrscheinlich nichts bekommen (sample
), auch wenn die Breite in Ihrem CSS definiert wurde. Sie erhalten die Nummer nur, wenn sie definiert wurde in el.style
durch javascript
.
Außerdem, offsetWidth
gibt Ihnen die tatsächliche Breite Ihres Elements, einschließlich padding
und border
wenn du benutzt content-box
css box model
was ist der Standardwert für box-sizing
. So kannst du darüber nachdenken, wie du es eingestellt hast width
des Inhalts des Elements und padding/border
weiter so (sample
).
Wenn Sie verwenden Border-Box css box model
, legen Sie die Gesamtbreite des Elements fest, einschließlich padding
und border
verkleinern Sie den Inhaltsbereich (sample
). Also in diesem Fall offsetWidth
und el.style.width
würde genau die gleichen Zahlen zurückgeben (wenn el.style.width
wurde zuvor eingestellt von javascript
).
-
In dieser Antwort sind einige Juwelen! Lies es sorgfältig!
– Govind Rai
25. Dezember ’16 um 22:41
Tim S.
Normalerweise ist offsetWidth eines Elements ein Maß, das die Elementränder, das horizontale Padding des Elements, die vertikale Bildlaufleiste des Elements (sofern vorhanden, falls gerendert) und die CSS-Breite des Elements umfasst.
Quelle: https://developer.mozilla.org/en/DOM/element.offsetWidth
Es ist also die Breite Ihres Elements einschließlich Rahmen und Auffüllung. Das gleiche für die Höhe.
-
Es enthält nicht den Rand, daher ist diese Antwort falsch /
– Samih
21. Februar ’14 um 11:50
offsetWidth ist ein Maß in Pixeln der CSS-Breite des Elements, einschließlich aller Rahmen, Auffüllungen und vertikalen Bildlaufleisten.
clientWidth ist die innere Breite (d. h. der Raum innerhalb eines Elements einschließlich Auffüllung, aber ohne Rahmen und Bildlaufleisten)
mit nur das CSS mit definiert zurückgeben
.