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.
<!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 ‘%’.
<!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
- Internet Explorer
- Mozilla firefox
- Opera
- Safari