HTML DOM Style borderRightColor Thuộc tính

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

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

Đặt thuộc tính borderRightColor -

object.style.borderRightColor = "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 Phải. Màu mặc định của nó được đặt thành màu đen
minh bạch	Làm cho màu của đường viền Bên phả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 borderRightColor:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border-right:solid 8px;
      border-right-color: orange;
   }
</style>
<script>
   function changeBorderRight(){
      document.getElementById("IMG1").style.borderRightColor="lightgreen";
      document.getElementById("Sample").innerHTML="The border Right color is now changed to green";
   }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150
">
<p>Change the above image border Right color by clicking the below button</p>
<button onclick="changeBorderRight()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style borderRightColor Thuộc tính

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

HTML DOM Style borderRightColor 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 “IMG1” 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-right:solid 8px;
   border-right-color: orange;
}
<img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-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 changeBorderRight () khi người dùng nhấp vào -

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

Phương thức changeBorderRight () 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 borderRjghtColor của nó thành lightgreen. Thao tác này thay đổi màu đường viền bên phải thành màu xanh lục nhạt và hiển thị 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 changeBorderRight(){
   document.getElementById("IMG1").style.borderLeftColor="lightgreen";
   document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}