HTML DOM Element clientHeight

Example

Get the height and width of "myDIV", including padding:

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

More examples below.


Description

The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

The clientHeight property is read-only.


Syntax

element.clientHeight

Return Value

Type Description
NumberThe viewable height of the element (in pixels) including padding


The difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without a scrollbar:

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";
Try it Yourself »

With a scrollbar:

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";
Try it Yourself »

Browser Support

element.clientHeight is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.