Skip to content
Related Articles

Related Articles

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

The DOM Style minWidth Property is used to set or return the minimum width of an element. It works on block-level elements or on elements with absolute or fixed position only.

Syntax:

  • Return minWidth property:
    object.style.minWidth
  • Set minWidth property:
    object.style.minWidth = "length|%|initial|inherit"

Properties:

  • length: It sets the minimum width in length units.
  • %: It sets the minimum width in % of the parent.
  • initial: It sets the property to the default value.
  • inherit: It inherits the property values from the parent element.

Return Value: It returns a string, representing the minimum width of the selected element.

Example-1:






<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style minWidth Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        #gfgg {
            width: 60%;
            background-color: lightgreen;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksforGeeks</h1>
        <button onclick="min()">
          Press
      </button>
  
        <h4>Click on the 'Press' button to
          set the minWidth of the div element.</h4>
  
        <div id="gfgg">
            <p>DOM Style minWidth Property: It is
              used to set the minWidth of an element.</p>
            <p>Here, the DIV element is used to 
              showcase the min.width property.</p>
            <p>Clicking on the press button 
              will execute the property.</p>
        </div>
  
        <script>
            function min() {
                document.getElementById(
                  "gfgg").style.minWidth = "500px";
            }
        </script>
    </center>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Style minWidth Property
    </title>
    <style>
        h1 {
            color: green;
        }
          
        #gfgg {
            width: 60%;
            background-color: lightgreen;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <button onclick="min()">Press</button>
        <h4>Click on the 'Press' button to see the
embedded box displaying the minWidth of the div element.</h4>
  
        <div style="background:lightgreen;
                    min-width:200px;" 
             id="gfgg">
            
            <p>DOM Style minWidth Property: It is used 
              to set the minWidth of an element.</p>
            
            <p>Here, the DIV element is used to 
              showcase the min.width property.</p>
            
            <p>Clicking on the press button
              will execute the property.</p>
        </div>
  
        <script>
            function min() {
                alert(document.getElementById(
                  "gfgg").style.minWidth);
            }
        </script>
    </center>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Browser Support: The browsers supported by HTML DOM Style minWidth property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :