How to set the minimum width of an element with JavaScript?

Javascript Web Development Front End Scripts

Use the minWidth property in JavaScript to set the minimum width. You can try to run the following code to set the minimum width of an element with JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 50%;
            background-color: gray;
         }
      </style>
   </head>
   <body>
      <p>Click below to set Minimum width.</p>
      <button type="button" onclick="display()">Min Width</button>
      <div id="box">
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      </div>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.minWidth = "500px";
         }
      </script>
   </body>
</html>

Rishi Raj

Updated on: 23-Jun-2020

665 Views

Kickstart Your Career

Get certified by completing the course

Get Started