Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : visibility

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут visibility | Свойство visibility

Определяет будет ли объект показываться или будет скрыт.

Синтаксис

HTML { visibility : sVisibility }
Скрипты [ sVisibility= ] object.style.visibility

Используемые значения

sVisibility
Строка, которая может определять и принимать от одно из следующих значений:
inherit
Значение по умолчанию. Значение свойства наследуется от родительского объекта.
visible
Объект видимый.
hidden
Объект невидимый.
collapse
Применяется в таблицах для скрытия отдельных строк (row) и столбцов (column). Для остальных элементов его действие аналогично hidden.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является inherit. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

В отличии от display:none, при использовании данного свойства объект невидим для пользователя, но физически он присутствует на странице, как если бы он был видимый.

Используйте свойство visibility в скриптах, чтобы динамически скрывать или показывать отдельные блоки сайта или части контента, осуществляя таким образом взаимодействие с пользователем.

Примеры

В следующих примерах используются атрибут visibility и свойство visibility для определения где объект будет видимым, а где нет.

В первом примере используются два класса, описанных в разделе style, чтобы показывать/скрывать рисунок при наведении пользователем курсора мыши на текст.

<head>
<style>
.vis1 {
    visibility: visible;
}
.vis2 {
    visibility: hidden;
}
</style>
</head>

<body>

<img id="oSphere" src="sphere.jpg" alt="sphere">
<p onmouseover="oSphere.className='vis2'" 
    onmouseout="oSphere.className='vis1'">
Наведите курсор мыши на текст, чтобы рисунок сферы исчез.</p>

</body>

Во втором примере используется вызов функции, чтобы скрыть рисунок.

<head>
<script type="text/javascript">
function disappear()
{
    oSphere.style.visibility="hidden"; 
    }
function reappear()
{
    oSphere.style.visibility="visible"; 
    }
</script>
</head>

<body>

<img src="sphere.jpeg" id="oSphere">
<p id="oTxt" onmouseover="disappear()" onmouseout="reappear()">
Наведите курсор мыши на текст, чтобы рисунок сферы исчез.</p>

</body>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms531180(VS.85).aspx

https://developer.mozilla.org/en/CSS/visibility

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования