HTML DOM Style borderLeftColor thuộc tính

Thuộc tính HTML DOM borderLeftColor được sử dụng để lấy hoặc đặt màu cho đường viền bên trái của một phần tử.

Sau đây là cú pháp cho -

Đặt thuộc tính borderImageWidth -

object.style.borderLeftColor = "color|transparent|initial|inherit"

Các thuộc tính trên được giải thích như sau -

Giá trị	Mô tả
màu	Để chỉ định màu đường viền bên trái. Màu mặc định được đặt thành màu đen
minh bạch	Làm cho màu đường viền bên trái trong suốt và có thể nhìn thấy nội dung bên dưới.
tên đầu tiên	Để đặt thuộc tính này thành giá trị mặc định.
kế thừa	Để kế thừa giá trị thuộc tính mẹ.

Chúng ta hãy xem một ví dụ cho thuộc tính borderLeftColor -

Ví dụ

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

Đầu ra

HTML DOM Style borderLeftColor thuộc tính

Khi nhấp vào “Thay đổi màu viền” nút -

HTML DOM Style borderLeftColor thuộc tính

Trong ví dụ trên -

Chúng tôi đã tạo một phần tử hình ảnh với id “DIV1” có kiểu css được áp dụng cho nó. Kiểu css chỉ định kiểu đường viền bên trái và màu đường viền bên trái.

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

Sau đó, chúng tôi tạo một nút có tên “Thay đổi màu đường viền” sẽ thực thi phương thức changeBorderLeft () khi được người dùng nhấp vào -

<button onclick="changeBorderLeft()">Change Border Color</button>

Phương thức changeBorderLeft () nhận phần tử với id “IMG1” bằng cách sử dụng phương thức getElementById () và đặt thuộc tính kiểu borderLeftColor của nó thành lightgreen. Thao tác này sẽ thay đổi màu đường viền bên trái thành màu xanh lục nhạt và hiển thị sự thay đổi này trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -

function changeBorderLeft(){
   document.getElementById("IMG1").style.borderLeftColor="lightgreen";
   document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}