Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM clientHeight Property
The HTML DOM clientHeight property is used to get the viewable height of an HTML element . This height includes padding but excludes any border, scrollbar and margins. It will only return the element’s height even if the content overflows from the element.
It can be calculated as −
CSS height+ CSS padding – border –scrollbar(horizontal) – margins
Syntax
Following is the syntax for clientHeight property −
element.clientHeight
Example
Let us look at an example for the HTML DOM clientHeight property −
<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
height: 250px;
padding: 10px;
margin: 15px;
border: 2px solid blue;
background-color: lightgreen;
text-align:center;
}
</style>
</head>
<body>
<p>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
function heightDiv() {
var x = document.getElementById("styleDIV");
var txt = "Height including padding = " + x.clientHeight ;
document.getElementById("Sample").innerHTML = txt;
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the GET HEIGHT button −
In the above example −
We have created a div with id “styleDIV” and have a style applied to it using its id −
#styleDIV {
height: 250px;
padding: 10px;
margin: 15px;
border: 2px solid blue;
background-color: lightgreen;
text-align:center;
}
<div id="styleDIV">
<b>A sample div</b>
</div>We have then created a button GET HEIGHT that will execute the heightDiv() method on click −
<button onclick="heightDiv()">GET HEIGHT</button>
The heightDiv() gets the <div> element using the getElementById() method and assigns it to variable x. Then using the clientHeight property on the <div> we get its height and after appending some text assigns it to variable txt. The text inside txt is then displayed inside the paragraph using the innerHTML property on the paragraph and assigning the txt variable to it −
function heightDiv() {
var x = document.getElementById("styleDIV");
var txt = "Height including padding = " + x.clientHeight ;
document.getElementById("Sample").innerHTML = txt;
}
240 Views
