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

My Personal Notes

Recommended Posts: