HTML | DOM Style minWidth Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.