如何使用 JavaScript 设置左边框的宽度?
在本教程中，我们将学习如何使用 JavaScript 设置左边框的宽度。
border 属性指定元素的边界。它指定边框样式、border-color 值以及 border-width。可以使用一个、两个或三个值来指定边框属性。值的顺序无关紧要。当您希望所有四个边框都相同时，border 简写会派上用场。
为了区分它们，请使用全写 border-color 和其他属性，如 border style 和 width，它们对每条边采用不同的值。或者，您可以使用逻辑属性(如 border-block-start)和物理属性(如 border-top)一次只定位一个边框。
DOM 样式 borderLeftWidth 属性用于设置或返回元素左边框的宽度。它返回一个字符串，表示元素左边框的宽度。border-style 属性始终在 border-left-width 属性之前声明。在调整元素的宽度之前，它必须有边界。
以下是使用 JavaScript 设置左边框宽度的方法。
使用 borderLeftWidth 属性
DOM 样式 borderLeftWidth 属性用于设置或返回元素左边框的宽度。它返回一个字符串，表示元素左边框的宽度。使用 thin border 属性指定较细的左边框。
语法
document.getElementById("box").style.borderLeftWidth = "thin";
document.getElementById("box").style.borderLeftWidth = "20px";
document.getElementById("box").style.borderLeftWidth = "thick";
使用 getElementById() 方法获取 box 元素，并将左边框的宽度更改为 thin 属性。
示例
在此示例中，我们创建了一个带有粗实心黑色边框的框宽度。边框的宽度和高度分别指定为 200px。使用 borderLeftWidth 属性，border 属性会发生变化。用户决定单击哪个按钮。单击"细边框"按钮时，边框变细。单击"长边框"按钮时，边框长度变为 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。它接受属性名称、值和优先级作为三个输入。
表示要设置的属性名称的字符串可能是属性名称参数中的必需输入。值是可以选择指定的参数，包含表示更新值的字符串。优先级参数中包含一个字符串，指示是否应将属性的优先级设置为重要，该参数是可选输入。
语法
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 设置左边框宽度的方法。第一种方法是使用边框 left-width 属性。第二种方法是使用 setProperty 方法设置左边框宽度。
