如何在 JavaScript 中设置元素的宽度？

在本教程中，我们将学习如何在 JavaScript 中设置元素的宽度。我们可以使用 JavaScript 中的“width”属性来设置元素的宽度。

网页应该在每个屏幕上都具有响应性。网页上的每个元素都应该覆盖其区域。我们可以通过设置元素的宽度和高度来设置元素的大小。

让我们看看如何在 JavaScript 中设置元素的宽度。以下是我们可以使用 JavaScript 设置元素宽度的属性：

  • width 样式属性

使用 DOM 的 width 样式属性

width 属性对于在 JavaScript 中排列元素至关重要。JavaScript DOM 提供了可用于代替 CSS 的属性。DOM 中的 width 属性用于设置元素的宽度。

有多个单位可以设置宽度，例如 px、em 和 cm。此 JavaScript DOM 属性只能在块级元素或具有固定位置的元素上设置。

所有用户都可以按照以下语法使用 width 样式属性来设置 JavaScript 中元素的宽度。

语法

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

您可以按照上述语法使用 width 样式属性。

参数

  • auto - 默认值

  • Length - 使用 px、em 或 cm 设置的宽度的长度。

  • % - 使用百分比设置宽度

  • Initial - 设置为其初始值，即浏览器默认值。

  • Inherit - 从其父级值继承宽度。

示例 1

您可以尝试运行以下代码来学习如何在 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>

示例 2

在下面提到的示例中，我们使用了具有 Range 类型的输入字段。滑动滑块后，我们将更改图像在运行时的宽度。我们使用 width 样式属性来设置图像的宽度。

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

在上面的示例中，用户可以看到我们使用了 width 样式属性来设置元素的宽度。

示例 3

在下面的示例中，我们使用了两个输入：文本输入和范围滑块。通过接受用户输入，我们创建了几个等于用户给定输入的椭圆。我们还使用 for 循环生成了几个椭圆，并逐渐减小它们的宽度。我们使用了 width 属性来设置元素的宽度。

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

在上面的示例中，用户可以看到我们创建了五个椭圆。我们使用 width 属性来设置每个椭圆的宽度。椭圆的数量等于输入的数量，并且从滑块中获取的宽度逐渐减小。

在本教程中，我们学习了如何使用 JavaScript DOM 的 width 样式属性来设置元素的大小。

更新于： 2022年10月12日

11K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告