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:
Return value: It returns the minimum height of an element.
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Style minHeight Property
</ title >
< style >
#GFG {
color: white;
width: 50%;
background: green;
margin: auto;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 id = "GFG" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Style minHeight Property</ h2 >
< br >
< button type = "button" onclick = "myFunc()" >
Click to Change minHeight
</ button >
< script >
function myFunc() {
document.getElementById("GFG")
.style.minHeight = "150px";
}
</ script >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM Style minHeight Property
</ title >
< style >
#GFG {
color: white;
width: 50%;
background: green;
margin: auto;
}
#Geek_Center {
height: 200px;
}
</ style >
</ head >
< body style = "text-align: center;" id = "Geek_Center" >
< h1 id = "GFG" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Style minHeight Property </ h2 >
< br >
< button type = "button" onclick = "myGeeks()" >
Click to Change minHeight
</ button >
< script >
function myGeeks() {
document.getElementById("GFG")
.style.minHeight = "50%";
}
</ script >
</ body >
</ html >
|
Output:
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
Last Updated :
25 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...