Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Get div height with vanilla JavaScript
The HTML <div> element is a container used to group and style other HTML elements. Getting the height of a div element is a common task in JavaScript, and there are several properties available to achieve this, each measuring different aspects of the element's dimensions.
Using offsetHeight
The offsetHeight property returns the total height of an element including content, padding, border, and scrollbar (if present).
Syntax
element.offsetHeight
The offsetHeight includes:
offsetHeight = content height + padding + border + scrollbar height
Example
<!DOCTYPE html>
<html>
<head>
<style>
.demo-div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="demo-div" id="myDiv">Content</div>
<p>Div height: <span id="result"></span></p>
<button onclick="getOffsetHeight()">Get offsetHeight</button>
<script>
function getOffsetHeight() {
const div = document.getElementById('myDiv');
const height = div.offsetHeight;
document.getElementById('result').textContent = height + 'px';
}
</script>
</body>
</html>
This example will show 150px (100px content + 40px padding + 10px border).
Using clientHeight
The clientHeight property returns the inner height of an element, including padding but excluding border, margin, and scrollbar.
clientHeight = content height + padding
Example
<!DOCTYPE html>
<html>
<head>
<style>
.demo-div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="demo-div" id="myDiv2">Content</div>
<p>Div height: <span id="result2"></span></p>
<button onclick="getClientHeight()">Get clientHeight</button>
<script>
function getClientHeight() {
const div = document.getElementById('myDiv2');
const height = div.clientHeight;
document.getElementById('result2').textContent = height + 'px';
}
</script>
</body>
</html>
This example will show 140px (100px content + 40px padding, excluding the 10px border).
Comparison
| Property | Includes Content | Includes Padding | Includes Border | Includes Scrollbar |
|---|---|---|---|---|
offsetHeight |
Yes | Yes | Yes | Yes |
clientHeight |
Yes | Yes | No | No |
Practical Example
<!DOCTYPE html>
<html>
<head>
<style>
.comparison-div {
width: 200px;
height: 80px;
padding: 15px;
border: 8px solid #333;
margin: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="comparison-div" id="testDiv">Test Content</div>
<button onclick="compareHeights()">Compare Heights</button>
<div id="results"></div>
<script>
function compareHeights() {
const div = document.getElementById('testDiv');
const offset = div.offsetHeight;
const client = div.clientHeight;
document.getElementById('results').innerHTML =
`<p>offsetHeight: ${offset}px</p>` +
`<p>clientHeight: ${client}px</p>` +
`<p>Border width: ${(offset - client) / 2}px</p>`;
}
</script>
</body>
</html>
Conclusion
Use offsetHeight when you need the complete element height including borders and scrollbars. Use clientHeight for the inner content area height excluding borders. Choose the appropriate property based on your specific measurement needs.
13K+ Views
