HTML DOM Style height Property is similar to CSS Height Property but it is used to set or get height of an element dynamically.
Syntax :
- To set the height property :
object.style.height = auto|length|%|initial|inherit;
- To get height property value:
object.style.height
Property Values:
| Value |
Description |
| auto |
Default value |
| length |
This define height in length unit |
| % |
This define height in percentage compare with the parent element. |
| initial |
sets its default value |
| inherit |
inherit the property from parents |
Return Value: String that gives height of the element.
Example-1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style height Property
</title>
<style>
p {
height: auto;
color: white;
font-size: 50px;
background-color: green;
}
</style>
</head>
<body>
<br>
<button onclick="Play()">
Click to change height
</button>
<br/>
<br/>
<script>
function Play() {
document.getElementById(
"block").style.height = "200px"
}
</script>
<p id="block">
Geeks For Geeks
</p>
</body>
</html>
|
Output
HTML DOM Height Before
HTML DOM Height after
Example-2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style height Property
</title>
<style>
div {
height: 10px;
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<br>
<button onclick="Play()">
Click to increase height of object
</button>
<br/>
<br/>
<script>
function Play() {
document.getElementById("block"
).style.height = "100px"
}
</script>
<center>
<div id="block">
</div>
</center>
</body>
</html>
|
Output :
DOM Height example before
DOM height after
Supported Browsers: The browser supported by DOM Style height property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!