Атрибут visibility стиля

Определение и использование

visibility Этот атрибут устанавливает или возвращает, должен ли элемент быть видимым.

visibility Этот атрибут позволяет автору показывать или скрывать элементы.

Этот атрибут ähnelt атрибут display. Но разница в том, что если установить display:none, он скрывает весь элемент, а visibility:hidden Это означает, что содержимое элемента будет невидимым, но элемент сохранит свои исходное положение и размер.

См. также:

Учебник CSS:CSS Display и visibility

Руководство по CSS:Атрибут visibility

Пример

Пример 1

Скрыть содержимое элемента <p>:

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

Попробуйте сами

Более примеров предоставлены внизу страницы.

Грамматика

Возврат атрибута visibility:

объект.style.visibility

Установите атрибут visibility:

объект.style.visibility = "visible|hidden|collapse|initial|inherit"

Значение свойств

Значение Описание
visible Этот элемент виден. По умолчанию.
hidden Элемент невидим, но все еще влияет на макет.
collapse При использовании в строках таблицы или ячейках элемент невидим (как и "hidden").
initial Установите это свойство в его значение по умолчанию. См. также initial.
inherit Инherit. См. также inherit.

Технические детали

Значение по умолчанию: visible
Возвратное значение: Строка, указывающая, отображается ли элемент.
Версия 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);

Попробуйте сами