Style visibility 属性

定义和用法

visibility 属性设置或返回元素是否应该可见。

visibility 属性允许作者显示或隐藏元素。

该属性类似于 display 属性。但不同的是，如果设置 display:none，它会隐藏整个元素，而 visibility:hidden 这意味着元素的内容将不可见，但元素会保持其原始位置和大小。

另请参阅：

CSS教程：CSS Display και visibility

CSS 参考手册：visibility 属性

实例

例子 1

隐藏 <p> 元素的内容：

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

Δοκιμάστε το προσωπικά

页面下方提供更多实例。

语法

返回 visibility 属性：

object.style.visibility

设置 visibility 属性：

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

Τιμή ιδιοτητας

Τιμή Περιγραφή
visible Το στοιχείο είναι ορατό. Προεπιλεγμένο.
hidden Το στοιχείο είναι αόρατο, αλλά εξακολουθεί να επηρεάζει τη διάταξη.
collapse Στη χρήση στοιχείων γραμμής ή κελιού της τάβλας, το στοιχείο είναι αόρατο (ίδιο με "hidden").
initial Ρυθμίστε αυτήν την ιδιότητα στην προεπιλεγμένη τιμή. Δείτε: initial.
inherit Απόκτησε αυτήν την ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: visible
Αποτελεσματική τιμή: Σtring, που δείχνει αν το στοιχείο εμφανίζεται.
Έκδοση CSS: CSS2

Υποστήριξη των προγραμματιστών

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Περισσότερες παραδείξεις

Παράδειγμα 2

Διαφορά μεταξύ των ιδιοτήτων display και visibility:

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

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Αλλαγή μεταξύ κρυψής και εμφάνισης στοιχείων:

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

Δοκιμάστε το προσωπικά

Παράδειγμα 4

Απόκρυψη και εμφάνιση του στοιχείου <img>:

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

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Επιστροφή του τύπου ορατότητας του στοιχείου <p>:

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

Δοκιμάστε το προσωπικά