базовый курс

ГРУППА КУРСА

Скрытие элемента

Существует два варианта, чтобы скрыть элемент со страницы:

  1. Элемент полностью удаляется со страницы, другие элементы занимают его место. Скрипты не имеют доступа к его свойствам до тех пор, пока он снова не будет показан.
  2. Элемент остаётся на странице, но он не виден.

Для первого способа нужно свойству display установить значение none.

+
8
<div style="display: none">Скрытый элемент</div>

Другой вариант спрятать элемент - указать прозрачный цвет всем составным частям элемента. Либо установить для них такой же цвет, как у внешнего блока или страницы, чтобы элемент слился с фоном, на котором он располагается.

9
10
<div style="color: #FFF">Блок с белым текстом</div>
<div style="color: rgba(5, 5, 5, 0)">с прозрачным текстом</div>

В CSS есть свойство opacity, позволяющее сделать элемент прозрачным. Значением этого свойства является число от нуля до единицы.

0 - полностью прозрачный

1 - непрозрачный

При этом прозрачными становяться все составные части элемента, и всё содержимое.

Стиль:

7
8
9
10
11
12
#op
  {
  border: 1px solid Red;
  background-color: #909090;
  opacity: 0.0;
  }

HTML код:

18
<div id="op">Прозрачный блок</div>

У блока в примере есть рамка и фон и в нём есть текст, но всё это не видно.

Есть ещё один способ скрыть элемент - спрятать его за другим блоком с позиционированием.

Если Вы продвигаете сайт в поисковых системах, то безопасным является только самый первый способ скрытия элемента. При других способах поисковый робот может решить, что Вы пытаетесь его обмануть и показать страницу не так, как её видят пользователи. Это может отрицательно повлиять на позиции сайта. Поэтому эти способы нужно использовать, только когда это действительно необходимо. В остальных случаях применяйте свойство display. Обычно используют именно его.