如何使用JavaScript設定左邊框的寬度？

在本教程中，我們將學習如何使用JavaScript設定左邊框的寬度。

border屬性指定元素的邊界。它指定邊框樣式、border-color值以及border-width。可以使用一個、兩個或三個值來指定邊框屬性。值的順序無關緊要。當您希望所有四個邊框都相同的時候，邊框速記非常方便。

為了區分它們，可以使用長格式的border-color和其他屬性，例如border style和width，它們為每一側取不同的值。或者，您可以使用諸如border-block-start之類的邏輯屬性和諸如border-top之類的物理屬性來一次只定位一個邊框。

DOM樣式borderLeftWidth屬性用於設定或返回元素左邊框的寬度。它返回一個字串，指示元素左邊框的寬度。border-style屬性始終在border-left-width屬性之前宣告。在調整元素寬度之前，它必須有邊界。

以下是使用JavaScript設定左邊框寬度的幾種方法。

使用borderLeftWidth屬性

DOM樣式borderLeftWidth屬性用於設定或返回元素左邊框的寬度。它返回一個字串，指示元素左邊框的寬度。使用thin邊框屬性指定細左邊框。

語法

document.getElementById("box").style.borderLeftWidth = "thin";

document.getElementById("box").style.borderLeftWidth = "20px";

document.getElementById("box").style.borderLeftWidth = "thick";

使用getElementById()方法獲取box元素，並將左邊框的寬度更改為thin屬性。

示例

在這個例子中，我們建立了一個帶有粗實心黑色邊框的盒子。邊框的寬度和高度分別指定為200px。使用borderLeftWidth屬性更改邊框屬性。使用者決定單擊哪個按鈕。“細邊框”按鈕單擊時，邊框變細。單擊“長邊框”按鈕時，邊框長度變為20px。“粗邊框”按鈕單擊時，邊框變粗。

<html>
<head>
   <style>
      #box {
         border: thin solid black;
         background-color: skyblue;
         width: 500px;
         height: 200px;
      }
   </style>
</head>
<body>
   <h2> Set the width of the left border using <i> borderLeftWidth </i> property </h2>
   <h4> Choose a button to select the property value: </h4>
   <button type="button" onclick="myFunction()"> Thin border</button>
   <br>
   <button type="button" onclick="myFunction1()"> Length border </button>
   <br>
   <button type="button" onclick="myFunction2()"> Thick border </button>
   <br>
   <div id="box"> The left border width of this box is changed. </div>
   <br>
   <br>
   <script>
      function myFunction() {
         document.getElementById("box").style.borderLeftWidth = "thin";
      }

      function myFunction1() {
         document.getElementById("box").style.borderLeftWidth = "20px";
      }

      function myFunction2() {
         document.getElementById("box").style.borderLeftWidth = "thick";
      }
   </script>
</body>
</html>

使用setProperty屬性

透過setProperty()函式介面，在樣式宣告物件上賦予屬性一個新值。可以使用setProperty()函式設定宣告塊的新CSS，或修改舊的CSS。它接受屬性名稱、值和優先順序作為三個輸入。

表示要設定的屬性名稱的字串可能是屬性名稱引數中必要的輸入。value是一個可以可選指定的引數，它包含一個表示更新值的字串。優先順序引數是一個可選輸入，其中包含一個字串，指示是否應將屬性的優先順序設定為important。

語法

function myFunction() {
   var x = document.getElementById("box").style;
   x.setProperty("border-left-width", "30px");
}

透過getElementById()方法獲取box元素。setProperty()屬性用於將左邊框的寬度設定為30px。

示例

在這個例子中，我們建立了一個帶有某些必填引數的盒子。建立按鈕來更改邊框的屬性值。setProperty()屬性用於將左邊框的寬度設定為不同的值。“長邊框”按鈕單擊時，邊框值變為30px。類似地，單擊“粗邊框”和“中等邊框”按鈕時，邊框值變為粗體或中等。

<html>
<head>
   <style>
      #box {
         border: thin solid grey;
         background-color: lightpink;
         width: 550px;
         height: 200px;
      }
   </style>
</head>
<body>
   <h3> Set the width of the left border using <i> setProperty </i> attribute </h3>
   <p> Choose a button to select the property value: </p>
   <button type="button" onclick="myFunction()">Length border </button>
   <br>
   <button type="button" onclick="myFunction1()"> Thick border </button>
   <br>
   <button type="button" onclick="myFunction2()"> Medium border </button>
   <br>
   <div id="box"> The left border width of this box is changed. </div>
   <script>
      function myFunction() {
         var x =
            document.getElementById("box").style;
         x.setProperty("border-left-width", "30px");
      }

      function myFunction1() {
         var x = document.getElementById("box").style;
         x.setProperty("border-left-width", "thick");
      }

      function myFunction2() {
         var x = document.getElementById("box").style;
         x.setProperty("border-left-width", "medium");
      }
   </script>
</body>
</html>

在本教程中，我們看到了兩種使用JavaScript設定左邊框寬度的方法。第一種方法是使用border left-width屬性。第二種方法是使用setProperty方法設定左邊框的寬度。

更新於：2022年11月9日

瀏覽量：254

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告