Свойство CSS visibility

Свойство CSS visibility отвечает за видимость объектов в html. Это уникальное свойство, которое позволяет скрыть любой объект, при этом важной особенностью является то, что объект занимает место на странице. Отметим, что объект скрывается вместе с границами.

Синтаксис CSS visibility

visibility: visible | hidden | collapse | inherit;

Где

  • visible (по умолчанию) – элемент является видимым
  • hidden – элемент становится невидимым
  • collapse – применяется для ячеек таблицы (тег <table>). Заданные строки и колонки убираются, а таблица перестраивается по новой
  • inherit – наследование от элемента родителя;

Примеры: скрытие объектов в html через visibility

<html>
<head>
<style>
.primer1{
visibility: visible;
}
.primer2{
visibility: hidden;
}
</style>
</head>
<body>
<div class="primer1">Абзац 1. Обычный текст со свойством visibility: visible;</div>
<div class="primer2">Абзац 1. Обычный текст со свойством visibility: hidden;</div>
<div class="primer1">Абзац 1. Обычный текст со свойством visibility: visible;</div>
</body>
</html>

На странице преобразуется в следующее

Абзац 1. Обычный текст со свойством visibility: visible;

Абзац 2. Невидимый текст со свойством visibility: hidden;

Абзац 3. Обычный текст со свойством visibility: visible;

Примечание:

Псевдокласс :hover не работает вместе с visibility. Другими словами если мы хотим скрывать объекты при наведении, то это не будет работать. Для этого можно воспользоваться другим свойством: opacity, которое отвечает за прозрачность.

Для обращения к visibility из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.visibility="VALUE"




Читайте также:

• Свойство text-decoration

• Свойство vertical-align

• Как сделать рамку элементов border

• Как сделать фон на сайте html

• Как сделать анимацию в html

• Отступ padding

• Отступ margin

• letter-spacing

• font


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.