Skip to content
Related Articles

Related Articles

HTML | DOM Style maxWidth Property
  • Last Updated : 01 Aug, 2019

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:



ValueDescription
noneDefault value without any limit on width of the element
lengthDefine width’s maximum value in length unit
%Define width’s maximum value in % of the parent element
initialSet property to its default value
inheritInherit 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 arrow_drop_up
Recommended Articles
Page :