Thuộc tính backgroundColor được sử dụng để thiết lập hoặc trả lại màu nền cho một phần tử. Chúng ta có thể chỉ định các giá trị theo tên chuẩn, rgb (), rgba (), hsl () hoặc hsla ().
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính backgroundColor -
object.style.backgroundColor = "color|transparent
Giá trị
Các giá trị thuộc tính trên được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | Màu sắc Để chỉ định màu nền. |
| 2 | Minh bạch Đặt màu nền thành trong suốt, tức là có thể nhìn thấy nội dung bên dưới. Nó là giá trị mặc định. |
Ví dụ
Chúng ta hãy xem ví dụ về thuộc tính backgroundColor -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
background-color: rgba(10,122,102,0.1);
}
</style>
<script>
function changeBackColor(){
document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
document.getElementById("Sample").innerHTML="The background color is now changed";
}
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>Change the above div background color by clicking the below button</p>
<button onclick="changeBackColor()">CHANGE COLOR</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 nút ĐỔI CLIP -