JavaScript offsetHeight
last modified April 2, 2025
In this article, we explore the offsetHeight property in JavaScript.
This property is essential for measuring the height of elements including
padding, borders, and scrollbars (if rendered).
Basic Definition
The offsetHeight property returns the height of an element in
pixels, including vertical padding and borders. It is a read-only property that
provides the element's layout height.
Unlike clientHeight, offsetHeight includes the element's
borders and scrollbar (if present). It does not include margins or elements
outside the visible area.
Basic offsetHeight Example
This example demonstrates how to get the height of a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic offsetHeight</title>
<style>
#box {
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div id="box">Content</div>
<button onclick="showHeight()">Show Height</button>
<p id="output"></p>
<script>
function showHeight() {
const box = document.getElementById('box');
const output = document.getElementById('output');
output.textContent = `Element height: ${box.offsetHeight}px`;
}
</script>
</body>
</html>
In this example, we have a div with specified height, padding, border, and
margin. When the button is clicked, the offsetHeight is displayed.
The reported height will be 200px (150px content + 40px padding + 10px border).
Note that margin is not included in the offsetHeight calculation.
Comparing offsetHeight with clientHeight
This example shows the difference between offsetHeight and
clientHeight.
<!DOCTYPE html>
<html>
<head>
<title>Height Comparison</title>
<style>
#container {
height: 200px;
padding: 15px;
border: 10px solid blue;
overflow: auto;
}
#content {
height: 300px;
background: #eee;
}
</style>
</head>
<body>
<div id="container">
<div id="content">Scrollable content</div>
</div>
<button onclick="compareHeights()">Compare Heights</button>
<p id="result"></p>
<script>
function compareHeights() {
const container = document.getElementById('container');
const result = document.getElementById('result');
result.innerHTML = `
offsetHeight: ${container.offsetHeight}px<br>
clientHeight: ${container.clientHeight}px
`;
}
</script>
</body>
</html>
This example creates a scrollable container with a larger content div. The
offsetHeight includes padding and borders, while
clientHeight only includes padding.
The offsetHeight will be 250px (200px + 30px padding + 20px border)
while clientHeight will be 230px (200px + 30px padding).
Dynamic Height Measurement
This example demonstrates how offsetHeight changes with dynamic
content.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Height</title>
<style>
#dynamic {
border: 2px solid green;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div id="dynamic">Initial content</div>
<button onclick="addContent()">Add Content</button>
<button onclick="showHeight()">Show Height</button>
<p id="heightDisplay"></p>
<script>
function addContent() {
const div = document.getElementById('dynamic');
div.innerHTML += '<br>Additional line of content';
}
function showHeight() {
const div = document.getElementById('dynamic');
const display = document.getElementById('heightDisplay');
display.textContent = `Current height: ${div.offsetHeight}px`;
}
</script>
</body>
</html>
This example shows how offsetHeight changes as content is added to
an element. The height increases as more content makes the element grow taller.
Each click on "Add Content" adds a new line, and "Show Height" displays the
current offsetHeight. This demonstrates the property's dynamic
nature.
Measuring Hidden Elements
This example explores how offsetHeight behaves with hidden elements.
<!DOCTYPE html>
<html>
<head>
<title>Hidden Elements</title>
<style>
#hiddenBox {
height: 100px;
padding: 20px;
border: 5px solid red;
background: #ffdddd;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="hiddenBox">This element can be hidden</div>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<button onclick="checkHeight()">Check Height</button>
<p id="heightInfo"></p>
<script>
function toggleVisibility() {
const box = document.getElementById('hiddenBox');
box.classList.toggle('hidden');
}
function checkHeight() {
const box = document.getElementById('hiddenBox');
const info = document.getElementById('heightInfo');
info.textContent = `offsetHeight: ${box.offsetHeight}px`;
}
</script>
</body>
</html>
This example demonstrates that offsetHeight returns 0 for elements
with display: none. The property only measures visible elements.
When the element is visible, it returns the full height (150px). When hidden, it returns 0. This is important for layout calculations involving hidden elements.
Responsive Layout Example
This example shows how to use offsetHeight in responsive design.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<style>
#responsive {
width: 80%;
margin: 0 auto;
padding: 20px;
border: 3px solid #333;
resize: both;
overflow: auto;
}
#sizeInfo {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="responsive">
Resizable container. Try resizing me by dragging the bottom-right corner.
<p id="sizeInfo"></p>
</div>
<script>
const container = document.getElementById('responsive');
const info = document.getElementById('sizeInfo');
function updateSizeInfo() {
info.textContent = `Current height: ${container.offsetHeight}px`;
}
// Update on initial load
updateSizeInfo();
// Update on resize
container.addEventListener('mouseup', updateSizeInfo);
</script>
</body>
</html>
This example creates a resizable container and displays its current height using
offsetHeight. The height updates when the user resizes the element.
The resize: both CSS property makes the element resizable. The
mouseup event triggers the height measurement after resizing.
Source
MDN offsetHeight Documentation
In this article, we have explored the offsetHeight property in
JavaScript. This property is crucial for accurate element height measurements
including borders and padding in web development.
Author
List all JS DOM tutorials.