HTML DOM Style borderTopColor thuộc tính

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

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

Đặt thuộc tính borderTopColor -

object.style.borderTopColor = "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 Trên cùng. 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 Trên cùng 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 borderTopColor -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1 {
      border-top:solid 8px;
      border-top-color: orange;
   }
</style>
<script>
   function changeBorderTop(){
      document.getElementById("IMG1").style.borderTopColor="blue";
      document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
   }
</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 top color by clicking the below button</p>
   <button onclick="changeBorderTop()">Change Border Color</button>
   <p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style borderTopColor thuộc tính

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

HTML DOM Style borderTopColor 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 trên cùng của đường viền và màu trên cùng của đường viền.

#IMG1 {
   border-top:solid 8px;
   border-top-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 changeBorderTop () khi được người dùng nhấp vào -

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

Phương thức changeBorderTop () 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 borderTopColor của nó thành màu xanh lam. Thao tác này thay đổi màu đường viền trên cùng thành màu xanh lam 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 changeBorderTop(){
   document.getElementById("IMG1").style.borderTopColor="blue";
   document.getElementById("Sample").innerHTML="The border top color is now changed to blue";
}