Khả năng hiển thị kiểu
Ví dụ
Ẩn nội dung của phần tử <p>:
document.getElementById("myP").style.visibility = "hidden";
Hãy tự mình thử »Sự miêu tả
Thuộc tính khả năng hiển thị đặt hoặc trả về liệu một phần tử có hiển thị hay không.
Thuộc tính hiển thị cho phép tác giả hiển thị hoặc ẩn một phần tử. Nó tương tự như thuộc tính display . Tuy nhiên, điểm khác biệt là nếu bạn đặt display:none
, nó sẽ ẩn toàn bộ phần tử, trong khi visibility:hidden
có 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.
Hỗ trợ trình duyệt
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả về thuộc tính hiển thị:
object .style.visibility
Đặt thuộc tính 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: | dễ thấy |
---|---|
Giá trị trả về: | Một Chuỗi, biểu thị nội dung của một phần tử có được hiển thị hay không |
Phiên bản CSS | CSS2 |
Thêm ví dụ
Ví 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";
}
Hãy tự mình thử »Ví 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';
}
}
Hãy tự mình thử »Ví dụ
Ẩn và hiển thị phần tử <img>:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Hãy tự mình thử »Ví dụ
Trả về kiểu hiển thị của phần tử <p>:
alert(document.getElementById("myP").style.visibility);
Hãy tự mình thử »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 hiển thị