HTML DOM Element offsetHeight egenskap

Definition och användning

offsetHeight Egenskapen returnerar elementets synliga höjd (i pixlar), inklusive inramning och padding, men utan marginaler.

offsetHeight Egenskapen är skrivskyddad.

Se också:CSS rammodell tutorial

offsetParent

Alla blockelement rapporterar avståndet från offsetföräldern:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offsetförälder är den närmaste anförda som har en icke-statisk position.

Om det inte finns någon offsetförälder, är avståndet relativt dokumentets kropp.

Se också:

offsetWidth egenskap

offsetParent egenskap

offsetTop egenskap

offsetLeft egenskap

clientTop egenskap

clientLeft egenskap

clientWidth egenskap

clientHeight egenskap

Exempel

Exempel 1

Visa "myDIV" höjd och bredd, inklusive inramning och padding:

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

Prova själv

Exempel 2

Skillnaden mellan clientHeight/clientWidth och offsetHeight/offsetWidth

Med rullningslista:

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

Prova själv

Ingen rullningslista:

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

Prova själv

Syntaks

element.offsetHeight

Returvärde

Typ Beskrivning
Nummer Elementets synliga höjd (i pixlar), inklusive inre marginaler, kanter och rullningslistor.

Webbläsarstöd

Alla webbläsare stöder element.offsetHeight：

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