HTML DOM Element clientHeight-eigenschap

Definitie en gebruik

clientHeight Eigenschap retourneert de zichtbare hoogte van het element, inclusief inschuifrand, maar niet inclusief rand, schuifbalk of marge, in pixels.

clientHeight Eigenschappen zijn alleen leesbaar.

Zie ook:CSS Box Model Tutorial

Zie ook:

clientWidth-eigenschap

clientTop-eigenschap

clientLeft-eigenschap

offsetHeight-eigenschap

offsetWidth-eigenschap

Als je een schuifbalk aan een element wilt toevoegen, gebruik dan CSS overflow property.

Voorbeeld

Voorbeeld 1

Haal de hoogte en breedte van "myDIV" op, inclusief inschuifrand:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Probeer het zelf

Voorbeeld 2: verschil tussen clientHeight/clientWidth en offsetHeight/offsetWidth

Zonder schuifbalk:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probeer het zelf

Met schuifbalk:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probeer het zelf

Syntaxis

element.clientHeight

Retourwaarde

Type Beschrijving
Getal Elementen zichtbare hoogte (in pixels), inclusief inschuifrand.

Browserondersteuning

Alle browsers ondersteunen element.clientHeight:

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