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 style of the left border with JavaScript?
In this tutorial, we shall learn how to set the style of the left border with JavaScript. To set the style of the left border in JavaScript, use the borderLeftStyle property. Set the style under this property that you want for the border i.e. solid, dashed, etc.
Using the borderLeftStyle Property
With this property, we can set or return the style of the left border of an element.
Syntax
object.style.borderLeftStyle = style;
This syntax allows the required border style to be set to the element's style.
Parameters
- style ? Sets the style of the left border. The available style values are explained below in values section.
Available Values
- none ? Sets no border.
- hidden ? Similar to "none". Unique to table element border issues.
- dotted ? Sets a dotted border.
- dashed ? Sets a dashed border.
- solid ? Sets a solid border.
- double ? Sets two borders. The total width is equal to the border width.
- groove ? Sets a 3-D grooved border. The effect is dependent on the color.
- ridge ? Sets a 3-D ridged border. The effect is dependent on the color.
- inset ? Sets a 3-D inset border. The effect is dependent on the color.
- outset ? Sets a 3-D outset border. The effect is dependent on the color.
- initial ? Sets this property to the default value.
- inherit ? Inherits this property from its parent element.
The property is none by default. The return value is a string representing the border left style.
Example 1: Setting Left Border Style
You can try to run the following code to learn how to style the left border:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 300px;
padding: 20px;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">Set left border style</button>
<script>
function display() {
document.getElementById("box").style.borderLeftStyle = "dashed";
}
</script>
</body>
</html>
Example 2: Interactive Border Style Selection
In this program, we are setting the left border style to a div element. We get the left border style from the user through a dropdown menu.
<html>
<head>
<style>
#lftBordrUsrEl {
background-color: #FFFFFF;
height: 50px;
padding-top: 35px;
padding-left: 5px;
border-left-width: 5px;
border-left-color: #D2B48C;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h3>Setting the left border style using the borderLeftStyle Property</h3>
<div id="lftBordrUsrEl">Set the left border style here.</div>
<div id="lftBordrUsrBtnWrap">
<select id="lftBordrUsrSel" size="10">
<option>dotted</option>
<option>dashed</option>
<option>double</option>
<option>groove</option>
<option>inset</option>
<option>none</option>
<option>hidden</option>
<option>outset</option>
<option>ridge</option>
<option selected="selected">solid</option>
</select>
<br><br>
<p>Select a border style and click the button.</p>
<button onclick="setLeftBorderStyle();">Set Left Border</button>
</div>
<script>
function setLeftBorderStyle() {
var lftBordrUsrSelTag = document.getElementById("lftBordrUsrSel");
var lftBordrUsrSelIndx = lftBordrUsrSelTag.selectedIndex;
var lftBordrUsrSelStat = lftBordrUsrSelTag.options[lftBordrUsrSelIndx].text;
var lftBodrUsrEl = document.getElementById("lftBordrUsrEl");
lftBodrUsrEl.style.borderLeftStyle = lftBordrUsrSelStat;
lftBodrUsrEl.innerHTML = "You have set the left border style to <b>" +
lftBodrUsrEl.style.borderLeftStyle + "</b>";
}
</script>
</body>
</html>
Example 3: Getting Left Border Style
We have set the left border style in this program to a div element. We display the left border style to the user when they click on the button.
<html>
<head>
<style>
#lftBordrGetEl {
background-color: #87CEEB;
height: 100px;
padding-top: 70px;
border-left-width: 10px;
border-left-color: #708090;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>Getting the style of the left border using the borderLeftStyle property.</p>
<div id="lftBordrGetEl" style="border-left-style: dotted">
Get the left border style of this element.
</div>
<div id="lftBordrGetBtnWrap">
<p>Click on the button to get the style.</p>
<button onclick="getLeftBorderStyle();">Get Style</button>
</div>
<p id="lftBordrGetOp"></p>
<script>
function getLeftBorderStyle() {
var lftBordrGetEl = document.getElementById("lftBordrGetEl");
var lftBordrGetOp = document.getElementById("lftBordrGetOp");
lftBordrGetOp.innerHTML = "The left border style is: <b>" +
lftBordrGetEl.style.borderLeftStyle + "</b>";
}
</script>
</body>
</html>
Conclusion
The borderLeftStyle property in JavaScript provides an easy way to dynamically set and retrieve the left border style of elements. This property works with various border styles like solid, dashed, dotted, and 3D effects, making it useful for creating interactive web interfaces.
377 Views
