HTML DOM Style borderLeftColor Property

HTMLDOMWeb DevelopmentFront End Technology

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 −

ValueDescription
colorFor specifying the left border color. The default color is set to black
transparentThe makes the left border color transparent and the underlying content can be seen.
initialFor setting this property to default value.
inheritTo inherit the parent property value.

Let us look at an example for the borderLeftColor property −

Example

 Live Demo

<!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";
}
raja
Published on 22-Oct-2019 16:59:57
Advertisements