Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the width of the left border with JavaScript?
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 defines the border style, color, and width. To modify individual border sides, we use specific properties like borderLeftWidth for the left border.
The DOM Style borderLeftWidth property allows you to set or return the width of an element's left border. Before setting the border width, ensure the element has a border style defined.
Using the borderLeftWidth Property
The borderLeftWidth property accepts values like "thin", "medium", "thick", or specific measurements in pixels.
Syntax
element.style.borderLeftWidth = "thin"; element.style.borderLeftWidth = "20px"; element.style.borderLeftWidth = "thick";
Example
This example demonstrates changing the left border width using three different values. Click the buttons to see the border width change.
<html>
<head>
<style>
#box {
border: thin solid black;
background-color: skyblue;
width: 500px;
height: 200px;
padding: 20px;
}
</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><br>
<button type="button" onclick="myFunction1()">20px border</button>
<br><br>
<button type="button" onclick="myFunction2()">Thick border</button>
<br><br>
<div id="box">The left border width of this box is changed.</div>
<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 Method
The setProperty() method provides an alternative way to set CSS properties. It accepts the property name, value, and optional priority as parameters.
Syntax
element.style.setProperty("border-left-width", "value");
Example
This example uses setProperty() to modify the left border width with different values including pixel measurements and keyword values.
<html>
<head>
<style>
#box {
border: thin solid grey;
background-color: lightpink;
width: 550px;
height: 200px;
padding: 20px;
}
</style>
</head>
<body>
<h3>Set the width of the left border using <i>setProperty</i> method</h3>
<p>Choose a button to select the property value:</p>
<button type="button" onclick="myFunction()">30px border</button>
<br><br>
<button type="button" onclick="myFunction1()">Thick border</button>
<br><br>
<button type="button" onclick="myFunction2()">Medium border</button>
<br><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>
Comparison of Methods
| Method | Syntax | Use Case |
|---|---|---|
| borderLeftWidth | element.style.borderLeftWidth = "value" |
Direct property access |
| setProperty() | element.style.setProperty("border-left-width", "value") |
Dynamic property setting |
Conclusion
Both borderLeftWidth property and setProperty() method effectively set the left border width. Choose borderLeftWidth for direct access or setProperty() for dynamic property manipulation.
424 Views
