HTML | DOM Style minHeight Property
The minHeight property in HTML DOM is used to set or return the minimum height of an element. This property affects only on block-level elements, absolute or fixed position elements.
Syntax:
- It returns the minHeight property.
object.style.minHeight
- It is used to set the minHeight Property.
object.style.minHeight = "length|%|initial|inherit"
Property Value:
| Value | Description |
|---|---|
| length | Define length in length unit. |
| % | Define length in percentage compare to parent element |
| initial | Set initial value that is default. |
| inherit | Inherit property from parent element. |
Return value: It returns the minimum height of an element.
Example 1:
html
<!DOCTYPE html><html> <head> <title> DOM Style minHeight Property </title> <style> #Geek1 { color: white; width: 50%; background: green; } </style> </head> <body> <center> <h1 id = "Geek1"> GeeksForGeeks </h1> <h2>DOM Style minHeight Property </h2> <br> <button type = "button" onclick = "geeks()"> Click to change </button> <script> function geeks() { document.getElementById("Geek1").style.minHeight = "150px"; } </script> </center> </body></html> |
Output:
- Before click on the button:
- After click on the button:
Example 2:
html
<!DOCTYPE html><html> <head> <title> DOM Style minHeight Property </title> <style> #Geek1 { color: white; width: 50%; background: green; } #Geek_Center { background: yellow; height: 200px; } </style> </head> <body> <center id = "Geek_Center"> <h1 id = "Geek1"> GeeksForGeeks </h1> <h2>DOM Style minHeight Property </h2> <br> <button type = "button" onclick = "geeks()"> Click to change </button> <script> function geeks() { document.getElementById("Geek1").style.minHeight = "50%"; } </script> </center> </body></html> |
Output:
- Before click on the button:
- After click on the button:
Supported Browsers: The browser supported by DOM Style minHeight property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 7
- Mozilla Firefox 3
- Opera 4
- Safari 1.3
Please Login to comment...