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
- Before :
HTML DOM Height Before
- After :
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 :
- Before :
DOM Height example before
- After :
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
Article Tags :
Recommended Articles