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

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

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

為了區分它們，請使用長格式的border-color和其他屬性，例如border style和寬度，這些屬性為每一側採用不同的值。或者，您可以使用諸如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() 方法獲取盒子元素，並將左邊框的寬度更改為 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。它接受屬性名稱、值和優先順序作為三個輸入。

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

語法

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

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

示例

在這個例子中，我們建立了一個帶有某些必需引數的盒子。建立按鈕以更改邊框的屬性值。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 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告