Thuộc tính opacity kiểu DOM trả về và sửa đổi giá trị của thuộc tính opacity CSS của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
1. Trả lại độ mờ
object.style.opacity
-
Sửa đổi độ mờ
object.style.opacity = “value”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính độ mờ kiểu -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
background: #1f13db;
height: 50px;
width: 100%;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style opacity Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add opacity</button>
<script>
function add() {
document.querySelector('p').style.opacity = "0.2";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thêm độ mờ ”Để thêm thuộc tính độ mờ -
