Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderLeftColor Property
The HTML DOM borderLeftColor property is used to get or set the color for left border of an element.
Following is the syntax for −
Setting the borderImageWidth property −
object.style.borderLeftColor = "color|transparent|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| color | For specifying the left border color. The default color is set to black |
| transparent | The makes the left border color transparent and the underlying content can be seen. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderLeftColor property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#IMG1{
border-left:solid 8px;
border-left-color: orange;
}
</style>
<script>
function changeBorderLeft(){
document.getElementById("IMG1").style.borderLeftColor="lightgreen";
document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
<p>Change the above image border left color by clicking the below button</p>
<button onclick="changeBorderLeft()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Color” button −
In the above example −
We have created an image element with id “DIV1” that has a css style applied to it. The css style specify the border left style and the border left color.
#IMG1 {
border-left:solid 8px;
border-left-color: orange;
}
<img id="IMG1" src=" https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">We then created a button named “Change Border Color” that will execute changeBorderLeft() method on being clicked by the user −
<button onclick="changeBorderLeft()">Change Border Color</button>
The changeBorderLeft() method gets the <img> element with id “IMG1” by using the getElementById() method and sets its borderLeftColor style property to lightgreen. This changes the left border color to lightgreen and displays this change in the paragraph with id “Sample” using its innerHTML property −
function changeBorderLeft(){
document.getElementById("IMG1").style.borderLeftColor="lightgreen";
document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}
50 Views
To Continue Learning Please Login