HTML DOM offsetHeight eigenschap
Voorbeeld
Verkrijg de hoogte en breedte van een <div>-element, inclusief opvulling en rand:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De eigenschap offsetHeight retourneert de zichtbare hoogte van een element in pixels, inclusief opvulling, rand en schuifbalk, maar niet de marge.
De reden waarom het woord "zichtbaar" is opgegeven, is omdat als de inhoud van het element groter is dan de werkelijke hoogte van het element, deze eigenschap alleen de zichtbare hoogte retourneert (zie "Meer voorbeelden").
Opmerking: om deze eigenschap te begrijpen, moet u het CSS Box-model begrijpen .
Tip: Deze eigenschap wordt vaak samen met de eigenschap offsetWidth gebruikt .
Tip: Gebruik de eigenschappen clientHeight en clientWidth om de zichtbare hoogte en breedte van een element te retourneren, alleen inclusief de opvulling.
Tip: Gebruik de CSS- overloopeigenschap om schuifbalken aan een element toe te voegen .
Deze eigenschap is alleen-lezen.
Browserondersteuning
Property | |||||
---|---|---|---|---|---|
offsetHeight | Yes | Yes | Yes | Yes | Yes |
Syntaxis
element.offsetHeight
Technische details
Winstwaarde: | Een getal, dat de zichtbare hoogte van een element in pixels weergeeft, inclusief opvulling, rand en schuifbalk |
---|
Meer voorbeelden
Voorbeeld
Dit voorbeeld laat het verschil zien tussen clientHeight/clientWidth en offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Voorbeeld
Dit voorbeeld laat het verschil zien tussen clientHeight/clientWidth en offsetHeight/offsetWidth, wanneer we een schuifbalk aan het element toevoegen:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";