Thuộc tính hiển thị kiểu DOM HTML trả về và sửa đổi xem một phần tử có nên hiển thị hay không trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Hiển thị trở lại
object.style.visibility
-
Sửa đổi khả năng hiển thị
object.style.visibility = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| ẩn | Trong đó phần tử không hiển thị nhưng sự hiện diện của nó sẽ ảnh hưởng đến bố cục. |
| hiển thị | Trong đó phần tử có thể nhìn thấy được. |
| sụp đổ | Trong đó phần tử trong hàng hoặc cột của bảng không hiển thị nhưng sự hiện diện của nó sẽ ảnh hưởng đến bố cục. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính hiển thị kiểu DOM HTML -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style visibility Property Example</h1>
<p>I'm paragraph element with some dummy text</p>
<button onclick="add()" class="btn">Set visibility</button>
<script>
function add() {
document.querySelector('p').style.visibility = "hidden";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt chế độ hiển thị ”Để đặt chế độ hiển thị với giá trị ẩn dưới dạng trên phần tử đoạn văn -
