如何使用 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日

浏览量：194

启动您的职业生涯

完成课程获得认证

开始学习
广告