Open In App

HTML | DOM Style minWidth Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


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 1
  • Edge 12
  • Internet Explorer 7
  • Firefox 1
  • Opera 4
  • Safari 1


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads