如何使用 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 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告