Свойство видимости стиля
Пример
Скрыть содержимое элемента <p>:
document.getElementById("myP").style.visibility = "hidden";
Определение и использование
Свойство видимости устанавливает или возвращает, должен ли элемент быть видимым.
Свойство видимости позволяет автору показать или скрыть элемент. Это похоже на свойство отображения . Однако разница в том, что если вы установите display:none, он скроет весь элемент, а visibility:hiddenэто означает, что содержимое элемента будет невидимым, но элемент останется в своем исходном положении и размере.
Поддержка браузера
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Синтаксис
Вернуть свойство видимости:
object.style.visibility
Установите свойство видимости:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Значения свойств
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
| Значение по умолчанию: | видимый |
|---|---|
| Возвращаемое значение: | Строка, представляющая, отображается ли содержимое элемента или нет. |
| CSS-версия | CSS2 |
Дополнительные примеры
Пример
Разница между свойством отображения и свойством видимости:
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";
}
Пример
Вернуть тип видимости элемента <p>:
alert(document.getElementById("myP").style.visibility);
Связанные страницы
Учебное пособие по CSS: Отображение и видимость CSS
Справочник по CSS: свойство видимости
❮ Объект стиля