The DOM clientHeight property is used to return the viewable height of an element in terms of the pixel. It includes the measurement of the width of padding but does not include the margin, border, and scrollbar property for the measurement of the element width. This property only returns the actual height of an element that is viewable or visible to the user It is a read-only property.
Syntax
element.clientHeightReturn Value: It returns a numeric value which represent the viewable height of the element.
Example:Â
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM clientHeight Property</title>
<style>
h1 {
color: green;
}
#GFG {
height: 100px;
width: 350px;
padding: 40px;
margin: 25px;
border: 5px solid coral;
background: green;
}
#sudo {
color: white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML DOM clientHeight Property</h2>
<div id="GFG">
<p style="color:white;font-size:25px;">
GeeksforGeeks
</p>
<p id="sudo"></p>
</div>
<!--Driver Code Ends-->
<button onclick="Geeks()">Submit</button>
<script>
function Geeks() {
var w = document.getElementById("GFG");
var x = "Viewable height is: " + w.clientHeight + "px<br>";
x += "Viewable width is: " + w.clientWidth + "px";
document.getElementById("sudo").innerHTML = x;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It returns the inner height including padding but excluding borders, margins, and horizontal scrollbars element.clientHeight = CSS height + vertical padding â height of any horizontal scrollbar (if present). The value is always an integer (rounded).
- When used on the element (or on in quirks mode), it returns the height of the viewport (excluding any scrollbar), not the height of the element itself.
