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
Selected Reading
How to set the height of an element with JavaScript?
Use the style.height property to dynamically set the height of HTML elements with JavaScript. This property accepts height values in pixels, percentages, or other CSS units.
Syntax
element.style.height = "value";
Where value can be in pixels (px), percentages (%), or other CSS units like em, rem, vh, etc.
Example: Setting Button Height
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is Demo Text.</p>
<button type="button" id="myButton" onclick="updateHeight()">Update Height</button>
<script>
function updateHeight() {
document.getElementById("myButton").style.height = "100px";
console.log("Button height set to 100px");
}
</script>
</body>
</html>
Multiple Height Setting Methods
<!DOCTYPE html>
<html>
<body>
<div id="box" style="background-color: lightblue; width: 200px; height: 50px; margin: 10px;">
Original Height: 50px
</div>
<button onclick="setPixelHeight()">Set 150px</button>
<button onclick="setPercentHeight()">Set 20%</button>
<button onclick="setAutoHeight()">Set Auto</button>
<script>
function setPixelHeight() {
document.getElementById("box").style.height = "150px";
console.log("Height set to 150px");
}
function setPercentHeight() {
document.getElementById("box").style.height = "20%";
console.log("Height set to 20%");
}
function setAutoHeight() {
document.getElementById("box").style.height = "auto";
console.log("Height set to auto");
}
</script>
</body>
</html>
Getting Current Height
<!DOCTYPE html>
<html>
<body>
<div id="testDiv" style="height: 200px; background-color: lightgreen; width: 200px;">
Test Division
</div>
<button onclick="getCurrentHeight()">Get Current Height</button>
<p id="result"></p>
<script>
function getCurrentHeight() {
const element = document.getElementById("testDiv");
const computedHeight = window.getComputedStyle(element).height;
const styleHeight = element.style.height || "Not set via style";
document.getElementById("result").innerHTML =
`Style height: ${styleHeight}<br>Computed height: ${computedHeight}`;
}
</script>
</body>
</html>
Common Height Units
| Unit | Description | Example |
|---|---|---|
| px | Pixels (absolute) | "200px" |
| % | Percentage of parent | "50%" |
| vh | Viewport height | "30vh" |
| auto | Browser calculated | "auto" |
Key Points
- Always include units (px, %, em) when setting height values
- Use
getComputedStyle()to get the actual rendered height - Setting height via JavaScript overrides CSS styles
- Use "auto" to let the browser calculate height based on content
Conclusion
The style.height property provides a simple way to dynamically control element heights in JavaScript. Use appropriate units based on your layout requirements and always include units in your height values.
Updated on: 2026-03-15T23:18:59+05:30
839 Views
Advertisements