HTML | DOM Style maxWidth Property
The maxWidth property set/return the maximum width of an element. The maxWidth property affects only on block-level elements, absolute or fixed position elements.
Syntax:
- It returns the maxWidth property.
object.style.maxWidth
- It sets the maxWidth Property.
object.style.maxWidth = "none|length|%|initial|inherit"
Values:
| Value | Description |
|---|---|
| none | Default value without any limit on width of the element |
| length | Define width’s maximum value in length unit |
| % | Define width’s maximum value in % of the parent element |
| initial | Set property to its default value |
| inherit | Inherit from its parent element |
Return value:It return the maximum width of element.
Example-1: Set width in length unit.
html
<!DOCTYPE html><html><head> <title>DOM Style maxWidth Property </title></head><style> #Geek1 { color: white; width: 300px; background: green; }</style><body> <center> <h1 id="Geek1"> GeeksForGeeks </h1> <h2>DOM Style maxWidth Property </h2> <br> <button type="button" onclick="mygeeks()"> Click to change </button> <script> function mygeeks() { // set width using length unit. document.getElementById( "Geek1").style.maxWidth = "220px"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-2: Set width in ‘%’.
html
<!DOCTYPE html><html><head> <title>DOM Style maxWidth Property </title></head><style> #Geek1 { color: white; width: 50%; background: green; } #Geek_Center { background: yellow; width: 400px; margin-left: 150px; }</style><body> <center id="Geek_Center"> <h3 id="Geek1"> GeeksForGeeks </h3> <h2>DOM Style maxWidth Property </h2> <br> <button type="button" onclick="mygeeks()"> Click to change </button> <script> function mygeeks() { // Set width using % . document.getElementById( "Geek1").style.maxWidth = "35%"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Supported Browsers: The browser supported by HTML | DOM Style maxWidth Property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 7 and above
- Mozilla Firefox 1 and above
- Opera 4 and above
- Safari 1 and above
Please Login to comment...