HTML | DOM Style minWidth Property

Read

Discuss

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:

html

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

html

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