How to set the width of the left border with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the width of the left border with JavaScript.

The border property specifies the boundary of an element. It specifies the border style, border-color values, and also border-width. One, two, or three of the values can be used to specify the border attribute. The sequence of the values is irrelevant. The border shorthand comes in handy when you want all four borders to be the same.

To differentiate them, employ the longhand border-color, and other attributes like border style and width, which take distinct values for each side. Alternatively, you may use logical attributes like border-block-start and physical attributes like border-top to target just one border at a time.

The DOM Style borderLeftWidth property is used to set or return the width of an element's left border. It returns a string indicating the width of an element's left border. The border-style property is always declared before the border-left-width property. Before you can adjust the width of an element, it must have boundaries.

Following are the ways to set the width of the left border with JavaScript.

Using the borderLeftWidth Property

The DOM Style borderLeftWidth property is used to set or return the width of an element's left border. It returns a string indicating the width of an element's left border. A thin left border is specified using the thin border attribute.

Syntax

document.getElementById("box").style.borderLeftWidth = "thin";

document.getElementById("box").style.borderLeftWidth = "20px";

document.getElementById("box").style.borderLeftWidth = "thick";

The box element is fetched using the getElementById() method, and the width of the left border is changed to thin property.

Example

In this example, we have created a box width with a thick solid black border. The width and height of the border are specified at 200px each. Using the borderLeftWidth property, the border property is changed. The user decides which button to click. When the "Thin border" button clicks, the border changes to thin. On clicking the "Length border" button is clicked, the border changes to 20px in length. The border changes to a thick value when clicking the "Thick border" button.


<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>

Using the setProperty attribute

A property on a style declaration object is given a new value through the setProperty() function interface. The declaration block's new CSS may be set, or the old CSS can be modified using the setProperty() function. It accepts the property name, value, and priority as three inputs.

A string representing the property's name to set may be a necessary input in the property name argument. The value is a parameter that can be optionally specified and comprises a string that denotes the updated value. A string that indicates whether or whether the priority of the property should be set to important is contained in the priority argument, which is an optional input.

Syntax

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

The box element is fetched through the getElementById() method. The setProperty() attribute is used to set the width of the left border to 30 px.

Example

In this example, we have created a box with some mandatory parameters. The buttons are created to change the property value of the border. The setProperty() attribute is used to set the width of the left border to different values. Clicking the "Length border" button changes the border values to 30px. Similarly, when the "Thick border" and "Medium Border" buttons are clicked, the border value changes to thick or medium.


<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>

In this tutorial, we have seen two ways to set the width of the left border with JavaScript. The first method is to use the border left-width property. The second way is to use the setProperty method for the width of the left border.