How to set the width of an element in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to set the width of an element in JavaScript. We can use the "width" property in JavaScript to set the width of an element.

The web page should be responsive on every screen. Each element on a web page should have its area covered. We can set the size of elements by setting their width and height.

Let us look at how to set the width of an element in JavaScript. Following is the property by which we can set the width of an element in JavaScript −

The width style property

Using the width style property of DOM

The width property is essential for arranging the elements in JavaScript. JavaScript DOM provides properties that can be used instead of CSS. The width property in DOM is used to set the width of an element.

There are multiple units to set the width as px, em, and cm. This property of JavaScript DOM can only be set on the block elements or elements with fixed positions.

All the users can follow the below syntax to use the width style property to set the width of an element in JavaScript.

Syntax

var element=document.getElementById(" <Id here> ");
element.style.width = "auto || Length || % || Initial || Inherit";
element.style.width; //returns the width of the element

You can follow the above syntax to use the width style property.

Parameters

auto − Default value
Length − Length of the width set using px, em, or cm.
% − Using percentage to set width
Initial − Set to its initial value means the browser’s default value.
Inherit −Inherit width from its parent value.

Example 1

You can try to run the following code to learn how to set the width of an element in JavaScript.


<!DOCTYPE html>
<html>
<body>
   <button type="button" id="btn" onclick="display()">
      Change height and width
   </button>
   <script>
      function display() {
         document.getElementById("btn").style.width = "250px";
         document.getElementById("btn").style.height = "250px";
      }
   </script>
</body>
</html>

Example 2

In the below-mentioned example, we have used an input field with the Range type. After sliding the bar, we will change the width of an image in run-time. We are using the width style property to set the width of an image.


<html>
<head>
   <style>
      #image{
         border: 6px solid green;
         width: 30%;
      }
      #container{
         margin-top: 2%;
         height: 5%;
      }
      #Range{
         width: 30%;
      }
   </style>
</head>
<body>
   <h3> Use <i> width style property </i> to set a width of an element </h3>
   <img id = "image" src = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial-768x353.png"/>
   <div id = "container">
      <label for = "Range"> Select Width: </label><br>
      <input type = "range" min = "1" max = "100" value = "50" id = "Range" >
   </div>
   <p id = "result"></p>
   <script>
      var image = document.getElementById("image");
      document.getElementById("Range").onchange = function(){
         var input = document.getElementById("Range").value;
         var input_percen = input + "%";
         image.style.width = input_percen;
         var element = document.getElementById("result");
         element.innerHTML = "Selected value of the width: " + input_percen;
         // document.getElementById("container").appendChild(element);
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the width style property to set a width of an element.

Example 3

In the following example, we used two inputs: text input and a range bar. By accepting user input, we are creating several ovals equal to the inputs given by the user. We also used a for loop to generate some ovals decreasing their width gradually. We have used the width properly to set the width of the element.


<html>
<body>
   <h2> Use <i> width style property </i> to set a width of an element </h2>
   <div id = "container">
      <label for = "number"> Type number of element: </label>
      <input type = "number" id = "number" value = "0" name = "numbers"/><br>
      <label for = "Range"> Select Width: </label>
      <input type = "range" min = "1" max = "100" value = "50" id = "Range">
      <div id = "shapes">
      </div>
   </div>
   <script>
      var container = document.getElementById("shapes");
      document.getElementById("Range").onchange = function(){
         var input = document.getElementById("Range").value;
         var input2 = document.getElementById("number").value;
         for(i=0 ; i<input2 ; i++){
            var element = document.createElement("div");
            element.style.backgroundColor = "red";
            element.style.height = "10%";
            element.style.margin = "1%"
            element.style.border = "2px solid red";
            element.style.borderRadius = "50%";
            element.style.width = input + "%";
            input = input - (1/3 * input);
            container.appendChild(element);
         }
      }
   </script>
</body>
</html>

In the above example, users can see that we have created five ovals. We have used the width property to set the width of each oval. The number of ovals equals the number of inputs, and the width taken from the slide bar decreases gradually.

In this tutorial, we learned to set the size of an element using the width style property of JavaScript DOM.