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

本教程將教你如何使用 JavaScript 設定右邊框的寬度。要設定右邊框的寬度，請使用borderRightWidth 屬性。使用此屬性設定右邊框的寬度。我們也可以應用borderWidth 來設定右邊框。

邊框用於網頁上的各種元素。它們顯示元素的邊界。我們可以將邊框應用於元素的各個側面。有不同的屬性可以設定邊框的不同側面。對於靜態邊框，通常使用 CSS。但是要動態更改它，JavaScript DOM 為我們提供了屬性。

但是要動態更改它，JavaScript DOM 為我們提供了屬性。

因此，讓我們看看如何使用 JavaScript 設定右邊框寬度。

以下是我們可以用來設定右邊框寬度的屬性：

  • 使用 borderRightWidth 屬性
  • 使用 borderWidth 屬性

使用 DOM 的borderRightWidth 屬性

borderRightWidth樣式屬性設定元素右邊框的寬度。邊框寬度可以使用 %、em、cm 和 px 設定。

以下是使用 JavaScript DOM 使用 borderRightWidth 屬性設定右邊框寬度的語法：

語法

var element = document.getElementById(" <Id here> "); 
element.style.borderRightWidth = " thin || thick || medium || initial || inherit || length ";

引數

  • thin − 設定細邊框

  • medium − 設定中等邊框

  • thick − 設定粗邊框

  • length − 以 %、cm、px 或 em 為單位設定邊框值。

  • initial − 設定為預設值。

  • inherit − 從其父元素繼承寬度。

示例 1

您可以嘗試執行以下程式碼，學習如何使用 JavaScript 設定右邊框的寬度。

<!DOCTYPE html> 
<html> 
<head> 
   <style> 
      #box { 
         border: 2px solid blue; 
         width: 550px; 
         height: 300px; 
      } 
   </style> 
</head> 
<body> 
   <div id = "box">Demo Text</div> 
   <br><br> 
   <button type="button" onclick="display()">Change right border width</button> 
   <script> 
      function display() { 
         document.getElementById("box").style.borderRightWidth = "thick" ; 
      } 
   </script> 
</body> 
</html>

示例 2

在這個例子中，我們使用了兩個按鈕“—”和“+”。單擊“+”按鈕後，div 的右邊框寬度將增加 1。單擊“—”按鈕後，div 的右邊框寬度將減少 1。

<html> 
<head> 
   <style> 
      body{ 
         margin: 1%; 
      } 
      #div{ 
         padding: 2%; 
         border: 1px solid red; 
         width: 500px; 
         text-align: center; 
         margin: 5px; 
      } 
      .btn{ 
         font-size: larger; 
         width: 30px; 
         background-color: black; 
         color: white; 
      } 
   </style> 
</head>  
<body>  
   <h3>Use <i>borderRightWidth</i> property to set the right border width</h3>  
   <div id = "div">This is a div</div><br>  
   Increase right border width:  
   <button id = "plus" class = "btn"> + </button> <br><br> 
   Decrease right border width: 
   <button id = "minus" class = "btn"> - </button>   
   <script> 
      var i = 1; 
      document.getElementById("plus").addEventListener("click", increaseRightBorder); 
      document.getElementById("minus").addEventListener("click", decreaseRightBorder); 
      function increaseRightBorder(){ 
         document.getElementById("div").style.borderRightWidth = i + "px"; 
         document.getElementById("div").innerHTML = "Clicked on plus button: "+i+" times"; 
         i++; 
      }  
      function decreaseRightBorder(){ 
         document.getElementById("div").style.borderRightWidth = i + "px"; 
         document.getElementById("div").innerHTML = "Clicked on minus button(Remaining plus): "+i+" times"; 
         i--; 
      }  
   </script>  
</body> 
</html>

在上面的例子中，使用者可以看到我們透過單擊按鈕來更改右邊框的寬度。我們使用了 borderRightWidth 屬性來設定右邊框寬度。

使用 DOM 的 borderWidth 屬性

JavaScript DOM 的 borderWidth 屬性用於設定元素邊框的寬度。

borderWidth 屬性也用作速記，用於設定以下屬性。

  • borderTopWidth: 設定元素上邊框的寬度

  • borderRightWidth: 設定元素右邊框的寬度

  • borderBottomWidth: 設定元素下邊框的寬度

  • borderLeftWidth: 設定元素左邊框的寬度

如果 borderWidth ="1"

"1" 將是應用於所有側面的邊框寬度。

如果 borderWidth ="1 2";

"1" 將是上邊框和下邊框的寬度，"2" 將是右和左的寬度。

如果 borderWidth ="1 2 3";

"1" 將是上邊框寬度，"2" 將是右和左邊框寬度，"3" 將是下邊框寬度。

如果 borderWidth ="1 2 3 4";

"1" 將是上邊框寬度，"2" 將是右邊框寬度，"3" 將是下邊框寬度，"4" 將是左邊框寬度。

我們可以使用 borderWidth 屬性來使用 JavaScript 設定邊框寬度。使用者可以按照以下語法使用 JavaScript 設定右邊框寬度。

語法

var element = document.getElementById(" <Id here> "); 
var right_width = "<one space here><Right border width><one space here>"; 

//Example: right_width = " 10px "; 
element.style.borderWidth = "<Top width here>" + right_width + "<bottom width here><left width here>"; 

//set the right border and the other side's width

您可以按照上述語法使用 JavaScript 設定邊框寬度。

示例

以下示例接受要設定為元素的右邊框寬度的值。單擊按鈕後，右邊框寬度將設定為使用者給定的值（以 px 為單位），其他值將預設為 5px。

<html> 
<head>  
   <style>  
      #div{ 
         border: 2px solid greenyellow; 
         width: 550px; 
         padding: 10px; 
      } 
   </style> 
</head> 
<body>  
   <div id = "div">  
      <h3>Use <i>borderWidth</i> property to set the right border width</h3> 
      <span>The width of Top, Bottom and left border applied to 2px by default.</span> <br><br> 
      <label for = "right"> Right Border Width : </label>  
      <input id = "right" type = "number" value = "0" name = "right_border"/> <br> 
      <br /> 
      <button id = "submit"> Apply </button> 
   </div>
   <script>  
      document.getElementById("submit").addEventListener("click", setRightBorder);  
      function setRightBorder(){  
         var width = document.getElementById("right").value; 
         var right_width = " " + width + "px "; 
         document.getElementById("div").style.borderWidth =  
         "2px" + right_width + "2px 2px"; 
      }  
   </script> 
</body> 
</html>

在上面的例子中，使用者可以看到我們使用了 borderWidth 屬性來使用 JavaScript 設定右邊框寬度。右邊框的寬度設定為使用者輸入的值（以 px 為單位），而其他側面的邊框寬度為 5px。

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

更新於：2022年10月12日

瀏覽量：192

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.