如何在 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+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告