HTML DOM offsetWidth eigenschap
Voorbeeld
Verkrijg de hoogte en breedte van een <div>-element, inclusief opvulling en rand:
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";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De eigenschap offsetWidth retourneert de zichtbare breedte van een element in pixels, inclusief opvulling, rand en schuifbalk, maar niet de marge.
De reden waarom het woord "zichtbaar" is opgegeven, is omdat als de inhoud van het element breder is dan de werkelijke breedte van het element, deze eigenschap alleen de zichtbare breedte retourneert (zie "Meer voorbeelden").
Opmerking: om deze eigenschap te begrijpen, moet u het CSS Box-model begrijpen .
Tip: Deze eigenschap wordt vaak samen met de eigenschap offsetHeight gebruikt .
Tip: Gebruik de eigenschappen clientHeight en clientWidth om de zichtbare hoogte en breedte van een element te retourneren, alleen inclusief de opvulling.
Tip: Gebruik de CSS- overloopeigenschap om schuifbalken aan een element toe te voegen .
Deze eigenschap is alleen-lezen.
Browserondersteuning
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntaxis
element.offsetWidth
Technische details
| Winstwaarde: | Een getal dat de zichtbare breedte van een element in pixels weergeeft, inclusief opvulling, rand en schuifbalk |
|---|
Meer voorbeelden
Voorbeeld
Dit voorbeeld laat het verschil zien tussen clientHeight/clientWidth en 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";
Voorbeeld
Dit voorbeeld laat het verschil zien tussen clientHeight/clientWidth en offsetHeight/offsetWidth, wanneer we een schuifbalk aan het element toevoegen:
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";