Атрибут visibility стиля
- Предыдущая страница verticalAlign
- Следующая страница whiteSpace
- Вернуться на один уровень вверх Объект Style HTML DOM
Определение и использование
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);
- Предыдущая страница verticalAlign
- Следующая страница whiteSpace
- Вернуться на один уровень вверх Объект Style HTML DOM