HTML | DOM Style minWidth Property
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 >w3wiki</ 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 >w3wiki</ 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