HTML-DOM -OffsetWidth- Eigenschaft
Beispiel
Holen Sie sich die Höhe und Breite eines <div>-Elements, einschließlich Polsterung und Rahmen:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Eigenschaft offsetWidth gibt die sichtbare Breite eines Elements in Pixel zurück, einschließlich Padding, Border und Scrollbar, aber nicht des Rands.
Der Grund, warum das Wort „sichtbar“ angegeben ist, liegt darin, dass diese Eigenschaft nur die sichtbare Breite zurückgibt, wenn der Inhalt des Elements breiter als die tatsächliche Breite des Elements ist (siehe „Weitere Beispiele“).
Hinweis: Um diese Eigenschaft zu verstehen, müssen Sie das CSS Box Model verstehen .
Tipp: Diese Eigenschaft wird häufig zusammen mit der Eigenschaft offsetHeight verwendet .
Tipp: Verwenden Sie die Eigenschaften clientHeight und clientWidth , um die sichtbare Höhe und Breite eines Elements zurückzugeben, nur einschließlich der Auffüllung.
Tipp: Um einem Element Bildlaufleisten hinzuzufügen, verwenden Sie die CSS- Überlaufeigenschaft .
Diese Eigenschaft ist schreibgeschützt.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetWidth
Technische Details
| Rückgabewert: | Eine Zahl, die die sichtbare Breite eines Elements in Pixel darstellt, einschließlich Auffüllung, Rahmen und Bildlaufleiste |
|---|
Mehr Beispiele
Beispiel
Dieses Beispiel zeigt den Unterschied zwischen clientHeight/clientWidth und offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Beispiel
Dieses Beispiel zeigt den Unterschied zwischen clientHeight/clientWidth und offsetHeight/offsetWidth, wenn wir dem Element eine Bildlaufleiste hinzufügen:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";