Thuộc tính khả năng hiển thị kiểu
Thí dụ
Ẩn nội dung của phần tử <p>:
document.getElementById("myP").style.visibility = "hidden";
Định nghĩa và Cách sử dụng
Thuộc tính khả năng hiển thị đặt hoặc trả về liệu một phần tử có nên hiển thị hay không.
Thuộc tính khả năng hiển thị cho phép tác giả hiển thị hoặc ẩn một phần tử. Nó tương tự với thuộc tính hiển thị . Tuy nhiên, sự khác biệt là nếu bạn đặt display:none, nó sẽ ẩn toàn bộ phần tử, trong khi visibility:hiddencó nghĩa là nội dung của phần tử sẽ ẩn, nhưng phần tử vẫn ở vị trí và kích thước ban đầu của nó.
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại thuộc tính khả năng hiển thị:
object.style.visibility
Đặt thuộc tính khả năng hiển thị:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Giá trị tài sản
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | có thể nhìn thấy |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho việc nội dung của một phần tử có được hiển thị hay không |
| Phiên bản CSS | CSS2 |
Các ví dụ khác
Thí dụ
Sự khác biệt giữa thuộc tính hiển thị và thuộc tính hiển thị:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Thí dụ
Chuyển đổi giữa ẩn và hiển thị một phần tử:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
Thí dụ
Ẩn và hiển thị một phần tử <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Thí dụ
Trả lại kiểu hiển thị của phần tử <p>:
alert(document.getElementById("myP").style.visibility);
Các trang liên quan
Hướng dẫn CSS: Hiển thị và hiển thị CSS
Tham chiếu CSS: thuộc tính khả năng hiển thị
❮ Đối tượng phong cách