базовый курс

ГРУППА КУРСА

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

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

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

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

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
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. Обычно используют именно его.