HTML DOM Element offsetWidth-egenskab

Definition og brug

offsetWidth Egenskaben returnerer elementets synlige bredde (i pixels), inklusive indrykning, kant og rullemarker, men ikke margin.

offsetWidth Egenskaberne er skrivebeskyttede.

Se også:CSS rammemodel tutorial

offsetParent

Alle blokklassede elementer rapporterer afstanden relativt til afvigende forælder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Afvigende forælder er den nærmeste forælder med en ikke-statisk placering.

Hvis der ikke findes en afvigende forælder, er afstanden relativ til dokumentets正文.

Se også:

offsetHeight-egenskab

offsetParent-egenskab

offsetTop-egenskab

offsetLeft-egenskab

clientTop-egenskab

clientLeft-egenskab

clientWidth-egenskab

clientHeight-egenskab

Eksempel

Eksempel 1

Få højde og bredde af "myDIV", inklusive indrykning og kant:

const elmnt = document.getElementById("myDIV");
text = "Højde med indrykning og kant: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Prøv det selv

Eksempel 2

Forskellen mellem clientHeight/clientWidth og offsetHeight/offsetWidth

Uden rullespind:

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";

Prøv det selv

Med rullespind:

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";

Prøv det selv

Syntaks

element.offsetWidth

Returværdi

Type Beskrivelse
Tal Elementets synlige bredde (i pixels), herunder indre kantlinjer, kanter og rullespind.

Browserunderstøttelse

Alle browsere understøtter element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support