HTML | DOM Style height Property
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"> Beginner For Beginner </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
Contact Us