HTML DOM Element offsetWidth-eigenschap

Definitie en gebruik

offsetWidth Eigenschappen retourneren de zichtbare breedte van het element (in pixels), inclusief binnenste marges, randen en schuifbalken, maar zonder marges.

offsetWidth Eigenschappen zijn alleen lezen.

Zie ook:CSS-balkmodelcursus

offsetParent

Alle blokkaste elementen rapporteren de afstand ten opzichte van de afgelegen ouder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

De afgelegen ouder is de dichtstbijzijnde ouder met een niet-statische positie.

Als er geen afgelegen ouder is, is de afstand ten opzichte van de tekst van het document.

Zie ook:

offsetHeight-eigenschap

offsetParent-eigenschap

offsetTop-eigenschap

offsetLeft-eigenschap

clientTop-eigenschap

clientLeft-eigenschap

clientWidth-eigenschap

clientHeight-eigenschap

Voorbeeld

Voorbeeld 1

Haal de hoogte en breedte van "myDIV" op, inclusief binnenste marges en randen:

const elmnt = document.getElementById("myDIV");
let text = "Hoogte met padding en rand: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Probeer het zelf

Voorbeeld 2

Het verschil tussen clientHeight/clientWidth en offsetHeight/offsetWidth

Zonder schuifbalk:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Probeer het zelf

Met schuifbalk:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Probeer het zelf

Syntax

element.offsetWidth

Retourwaarde

Type Beschrijving
Getal De zichtbare breedte van het element (in pixels), inclusief de binnenafstand, randen en schuifbalken.

Browserondersteuning

Ondersteund door alle browsers element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning