HTML DOM Style maxWidth Property
The maxWidth property of HTML DOM sets/returns the maximum width of an element. The maxWidth property affects only 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"
Property 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: This example Sets the width in length unit.
html
<!DOCTYPE html> < html > < head > < title >DOM Style maxWidth Property </ title > < style > #GFG { color: white; width: 300px; background: green; margin: auto; } </ style > </ head > < body style = "text-align: center;" > < h1 id = "GFG" > w3wiki </ h1 > < h2 >HTML DOM Style maxWidth Property</ h2 > < br > < button type = "button" onclick = "myBeginner()" > Click to change </ button > < script > function myBeginner() { // Sets the width using length unit document.getElementById("GFG") .style.maxWidth = "220px"; } </ script > </ body > </ html > |
Output:
Example 2: This example Sets the width value in ‘%’.
html
<!DOCTYPE html> < html > < head > < title >DOM Style maxWidth Property </ title > < style > #GFG { color: white; width: 22%; background: green; margin: auto; } </ style > </ head > < body style = "text-align: center;" > < h1 id = "GFG" > w3wiki </ h1 > < h2 >HTML DOM Style maxWidth Property</ h2 > < br > < button type = "button" onclick = "myBeginner()" > Click to change </ button > < script > function myBeginner() { // Sets the width using length unit document.getElementById("GFG") .style.maxWidth = "17%"; } </ script > </ body > </ html > |
Output:
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