HTML DOM Element offsetWidth property

Definition and usage

offsetWidth The property returns the visible width of the element (in pixels), including padding, border, and scrollbar, but not including margin.

offsetWidth The property is read-only.

See also:CSS box model tutorial

offsetParent

All block-level elements report the offset relative to the offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offset parent refers to the nearest ancestor with a non-static position.

If there is no offset parent, the offset is relative to the main text of the document.

See also:

offsetHeight property

offsetParent property

offsetTop property

offsetLeft property

clientTop property

clientLeft property

clientWidth property

clientHeight property

Instance

Example 1

Get the height and width of "myDIV", including padding and border:

const elmnt = document.getElementById("myDIV");
text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Bredd med marginaler och kanter: " + elmnt.offsetWidth + "px";

Prova själv

Exempel 2

Skillnaden mellan clientHeight/clientWidth och offsetHeight/offsetWidth

Utan rullgardin:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Höjd med marginaler: " + elmnt.clientHeight + "px<br>";
text += "Höjd med marginaler och kanter: " + elmnt.offsetHeight + "px<br>";
text += "Bredd med marginaler: " + elmnt.clientWidth + "px<br>";
text += "Bredd med marginaler och kanter: " + elmnt.offsetWidth + "px";

Prova själv

Med rullgardin:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Höjd med marginaler: " + elmnt.clientHeight + "px<br>";
text += "Höjd med marginaler, kanter och rullgardin: " + elmnt.offsetHeight + "px<br>";
text += "Bredd med marginaler: " + elmnt.clientWidth + "px<br>";
text += "Bredd med marginaler, kanter och rullgardin: " + elmnt.offsetWidth + "px";

Prova själv

Syntax

element.offsetWidth

Returvärde

Typ Beskrivning
Nummer Elementets synliga bredd (i pixlar), inklusive inre marginaler, kanter och rullgardin.

Webbläsarstöd

Alla webbläsare stöder element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd