Atrybut visibility stylu

Definicja i użycie

visibility Atrybut ustawia lub zwraca, czy element powinien być widoczny.

visibility Atrybut pozwala autorowi wyświetlać lub ukrywać element.

Ten atrybut jest podobny do Atrybut display. Ale różni się od tego, jeśli ustawisz display:none, co ukryje cały element, a visibility:hidden Oznacza to, że zawartość elementu będzie niewidoczna, ale element będzie utrzymywał swoją oryginalną pozycję i rozmiar.

Inne zasoby:

CSS Kurs:CSS Display i visibility

CSS PodręcznikAtrybut visibility

Przykład

Przykład 1

Ukryj zawartość elementu <p>:

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

Spróbuj sam

Poniżej znajduje się więcej przykładów.

Gramatyka

Zwróć atrybut visibility:

obiekt.style.visibility

Ustawienie atrybutu visibility:

obiekt.style.visibility = "widoczny|ukryty|zwiędnięty|domyślny|dziedziczony"

Wartość atrybutu

Wartość Opis
visible Element jest widoczny. Domyślnie.
hidden Element jest niewidoczny, ale wciąż wpływa na układ.
collapse Gdy jest używany na wierszu tabeli lub komórce, element jest niewidoczny (jest to samo co "hidden").
initial Ustaw ten atrybut na jego wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę wartość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: visible
Zwrócona wartość: Ciąg znaków, który oznacza, czy element jest wyświetlany.
Wersja CSS: CSS2

Wspierane przeglądarki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wspierane Wspierane Wspierane Wspierane Wspierane

Więcej przykładów

Przykład 2

Różnica między atrybutem display a atrybutem visibility:

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

Spróbuj sam

Przykład 3

Przełączanie między ukrywanym i wyświetlonym elementem:

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

Spróbuj sam

Przykład 4

Ukrywanie i wyświetlanie elementu <img>:

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

Spróbuj sam

Przykład 5

Zwróć typ widoczności elementu <p>:

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

Spróbuj sam