The DOM Style minWidth Property is used to set or return the minimum width of an element. It works on block-level elements or on elements with absolute or fixed position only.
Syntax:
- Return minWidth property:
object.style.minWidth
- Set minWidth property:
object.style.minWidth = "length|%|initial|inherit"
Properties:
- length: It sets the minimum width in length units.
- %: It sets the minimum width in % of the parent.
- initial: It sets the property to the default value.
- inherit: It inherits the property values from the parent element.
Return Value: It returns a string, representing the minimum width of the selected element.
Example-1:
html
<!DOCTYPE html><html>
<head>
<title>
HTML | DOM Style minWidth Property
</title>
<style>
h1 {
color: green;
}
#gfgg {
width: 60%;
background-color: lightgreen;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<button onclick="min()">
Press
</button>
<h4>Click on the 'Press' button to
set the minWidth of the div element.</h4>
<div id="gfgg">
<p>DOM Style minWidth Property: It is
used to set the minWidth of an element.</p>
<p>Here, the DIV element is used to
showcase the min.width property.</p>
<p>Clicking on the press button
will execute the property.</p>
</div>
<script>
function min() {
document.getElementById(
"gfgg").style.minWidth = "500px";
}
</script>
</center>
</body>
</html>
|
Output:
- Before clicking on the button:
- After clicking on the button:
Example-2:
html
<!DOCTYPE html><html>
<head>
<title>
HTML | DOM Style minWidth Property
</title>
<style>
h1 {
color: green;
}
#gfgg {
width: 60%;
background-color: lightgreen;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<button onclick="min()">Press</button>
<h4>Click on the 'Press' button to see the
embedded box displaying the minWidth of the div element.</h4>
<div style="background:lightgreen;
min-width:200px;"
id="gfgg">
<p>DOM Style minWidth Property: It is used
to set the minWidth of an element.</p>
<p>Here, the DIV element is used to
showcase the min.width property.</p>
<p>Clicking on the press button
will execute the property.</p>
</div>
<script>
function min() {
alert(document.getElementById(
"gfgg").style.minWidth);
}
</script>
</center>
</body>
</html>
|
Output:
- Before clicking on the button:
- After clicking on the button:
Browser Support: The browsers supported by HTML DOM Style minWidth property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 7
- Firefox 1
- Opera 4
- Safari 1