Thuộc tính borderBottomColor được sử dụng để đặt hoặc lấy màu đường viền dưới cùng của một phần tử. Điều cần thiết là phải khai báo kiểu đường viền vì phần tử phải có đường viền để thuộc tính này hoạt động.
Cú pháp
Sau đây là cú pháp để thiết lập thuộc tính borderBottomColor -
object.style.borderBottomColor = "color|transparent|initial|inherit"
Sau đây là cú pháp để trả về thuộc tính borderBottomColor -
object.style.borderBottomColor
Giá trị
Các giá trị thuộc tính được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | màu Để chỉ định màu đường viền dưới cùng. Màu mặc định là màu đen. |
| 2 | trong suốt Để làm cho đường viền dưới trong suốt, tức là nội dung có thể được nhìn thấy từ phía dưới. |
| 3 | Ban đầu Để thiết lập thuộc tính này thành giá trị ban đầu. |
| 4 | Kế thừa Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính borderBottomColor -
<!DOCTYPE html>
<html>
<head>
<style>
#IMG1 {
border-bottom: 7px solid orange;
box-shadow: 2px 2px 4px 1px seagreen;
}
</style>
<script>
function changeBorder(){
document.getElementById("IMG1").style.borderBottomColor="pink";
document.getElementById("Sample").innerHTML="The bottom border color for the image is now changed";
}
</script>
</head>
<body>
<h2>iOS Tutorial</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/ios/images/ios.jpg">
<p>Change the above image's below border...</p>
<button onclick="changeBorder()">Change Bottom Border</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào “Thay đổi đường viền dưới cùng” -
