Thuộc tính visibility của Style

Định nghĩa và cách sử dụng

visibility Thuộc tính này thiết lập hoặc trả về phần tử có nên nhìn thấy hay không.

visibility Thuộc tính cho phép tác giả hiển thị hoặc ẩn phần tử.

Thuộc tính này tương tự như Thuộc tính displayNhưng khác biệt là, nếu đặt display:noneNó sẽ ẩn toàn bộ phần tử, trong khi visibility:hidden Nó có nghĩa là nội dung của phần tử sẽ không thể nhìn thấy, nhưng phần tử sẽ giữ nguyên vị trí và kích thước ban đầu.

Xem thêm:

Hướng dẫn CSS:CSS Display và visibility

Hướng dẫn CSS:Thuộc tính visibility

Thực hành

Ví dụ 1

Ẩn nội dung của phần tử <p>:

document.getElementById("myP").style.visibility = "hidden";

Thử nghiệm trực tiếp

Cung cấp thêm nhiều ví dụ ở dưới trang.

Ngữ pháp

Trả về thuộc tính visibility:

object.style.visibility

Đặt thuộc tính visibility:

object.style.visibility = "visible|hidden|collapse|initial|inherit"

Attribute value

Value Description
visible Yếu tố này là hiển thị. Mặc định.
hidden Yếu tố không hiển thị nhưng vẫn ảnh hưởng đến bố cục.
collapse Khi sử dụng trên hàng hoặc ô bảng, yếu tố không hiển thị (ngay cả khi "hidden").
initial Thuộc tính này được đặt về giá trị mặc định. Xem thêm initial.
inherit Thuộc tính này được kế thừa từ yếu tố cha. Xem thêm inherit.

Technical details

Default value: visible
Return value: Chuỗi biểu thị yếu tố có hiển thị hay không.
CSS version: CSS2

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

More examples

Ví dụ 2

Sự khác biệt giữa thuộc tính display và thuộc tính visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Thử nghiệm trực tiếp

Ví dụ 3

Chuyển đổi giữa việc ẩn và hiển thị các yếu tố:

function myFunction() {
  var x = document.getElementById('myDIV');
  x.style.visibility = 'visible';
    else {
  }
    x.style.visibility = 'hidden';
  }
}

Thử nghiệm trực tiếp

Ví dụ 4

Hiện và ẩn thẻ <img>:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

Thử nghiệm trực tiếp

Ví dụ 5

Trả về loại可见性 của thẻ <p>:

alert(document.getElementById("myP").style.visibility);

Thử nghiệm trực tiếp