HTML DOM Element offsetHeight-eigenschap

Definitie en gebruik

offsetHeight De eigenschap retourneert de zichtbare hoogte van het element (in pixels), inclusief de binnenste marge, rand en scrollbar, maar zonder de marge.

offsetHeight Eigenschappen zijn alleen lezen.

Zie ook:CSS frame model tutorial

offsetParent

Alle blokgewrichten rapporteren de afstand ten opzichte van de afgeleide ouder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

Als er geen afgeleide ouder bestaat, is de afstand ten opzichte van de正文 van het document.

Zie ook:

offsetWidth-eigenschap

offsetParent-eigenschap

offsetTop-eigenschap

offsetLeft-eigenschap

clientTop-eigenschap

clientLeft-eigenschap

clientWidth-eigenschap

clientHeight-eigenschap

Voorbeeld

Voorbeeld 1

Toon de hoogte en breedte van "myDIV", inclusief de binnenste marge en rand:

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 uit

Voorbeeld 2

Het verschil tussen clientHeight/clientWidth en offsetHeight/offsetWidth

Met 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 uit

Geen 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 uit

Syntaxis

element.offsetHeight

Retourwaarde

Type Beschrijving
Nummer De zichtbare hoogte van het element (in pixels), inclusief inkepingen, randen en schuifbalken.

Browserondersteuning

Ondersteund door alle browsers element.offsetHeight:

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