HTML DOM Style visibility

Свойство visibility

Пример style.visibility

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

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

Описание visibility

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

Свойство visibility позволяет автору показывать или скрывать элемент. Оно похоже на свойство display. Однако разница в том, что если задать display:none, то будет скрыт весь элемент, тогда как visibility:hidden означает, что содержимое элемента будет невидимым, но элемент останется в своем исходном положении и размере.

Поддержка visibility

Свойство
visibility	Да	Да	Да	Да	Да

Синтаксис visibility

Вернуть свойство visibility:

object.style.visibility

Установите свойство visibility:

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

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

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

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

Значение по умолчанию:	visible
Возвращаемое значение:	Строка, указывающая, отображается ли содержимое элемента или нет.
CSS Версия	CSS2

Ещё примеры visibility

Разница между свойство display и visibility:

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

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

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

Переключение между скрытием и отображением элемента:

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

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

Скрыть и показать элемент <img>:

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

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

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

Вернуть свойство visibility элемента <p>:

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

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