Вы здесь: Главная » JavaScript » Видимость элемента в JavaScript и CSS. Свойство display: none и block

Видимость элемента в JavaScript и CSS. Свойство display: none и block

Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о css-свойстве объекта display. Обычно мы проверяем на соответствие этого свойства значению block или none, однако, сейчас появились другие значения этого свойства, например, inline-block, flex, grid.

Проверка на стилевое свойство display: none

Если у вас для элемента явно назначено стилевое свойство display: none, то вы можете легко изменять это свойство на  display: block или flex, или grid по необходимости. Что значит "явно назначено стилевое свойство"? Это  подразумевает наличие атрибута style="display: none" непосредственно в том теге, который вы хотите впоследствии отображать, как правило при клике на другом элементе, расположенном в непосредственной близости от скрытого.

Например, у вас есть такой код:

Рабочий пример:

Кликните, чтобы узнать, что такое Lorem Ipsum?

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

Минусом такого подхода является то, что явное назначение стилевого свойства в виде атрибута style="display: none" бывает крайне редко в верстке. Чаще оно добавляется в коде JavaScript, и им же потом и удаляется.

Определяем свойство display, описанное во внешнем css-файле

Если же display: none установлен в css-стилях во внешнем файле или общих тегах <style> для данной страницы, то нужно использовать метод window.getComputedStyle(), который позволяет добраться до стилевых свойств определенного элемента, которые описаны не в нем самом. А затем используем для переключения видимости спрятанного элемента код, похожий на предыдущий вариант.

Примечание: вместо display: block вы можете использовать display: flex или grid.

Проверяем работоспособность примера:

Где взять Lorem ipsum

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или "невозможных" слов. Можно сгенерировать текст Lorem ipsum с помощью плагина Emmet, доступного для большинства современных редакторов кода.

Добавление/удаление класса со свойством display: none

Для работы с последующими примерами нам понадобится описать ряд css-правил для различных классов, чтобы понимать, какие изменения происходят при добавлении/удалении какого-либо класса.

CSS-стили

Пример с переключением класса со свойством display: none !important

Когда в любое css-свойство вы добавляете !important, это означает, что оно переопределяет даже те свойства, которые назначены в атрибуте style, повышая таким образом приоритет данного свойства для атрибута class. Поэтому здесь имеет смысл использовать такое JavaScript-свойство, как classList, которое содержит псевдомассив из всех классов, назначенных для данного элемента. Свойство classList имеет в своем арсенале замечательный метод toggle('имя_класса'), который работает, как переключатель классов:  если указанный в скобках класс назначен данному элементу, он его убирает, если нет - добавляет. Именно им мы и воспользуемся в примере ниже для переключения видимости спрятанных изначально элементов списка <dd class="hidden-block">:

Показать абзац 1 с Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eveniet possimus, esse nihil tenetur vitae fugit repellendus quisquam neque provident numquam impedit a magnam harum, hic quas sint odit, facilis.
Показать абзац 2 с Lorem ipsum
Delectus, repellendus, quaerat? Fugiat non repellat voluptas in, ea neque impedit hic voluptatum dicta molestias illum beatae inventore quos blanditiis assumenda autem ad nobis sint mollitia doloremque nulla quae dolores.
Показать абзац 3 с Lorem ipsum
Natus culpa voluptas velit unde consequatur voluptatum consequuntur sed quibusdam! Nulla consectetur aperiam rem iure, illum, commodi ut earum enim totam. Tenetur numquam fugit totam ipsam debitis cupiditate quam quae!
Показать абзац 4 с Lorem ipsum
Dolorem ab, expedita est ducimus voluptatibus, debitis eveniet architecto perferendis, porro maiores eos. Inventore nisi nesciunt magni vero deleniti recusandae velit! Repellat natus aspernatur, et veritatis laboriosam porro corporis eos.
Показать абзац 5 с Lorem ipsum
Quas quam, facere. Itaque, deleniti, reiciendis. Esse soluta, minima. Sed odio earum cumque fugiat, modi inventore. Veritatis alias molestias unde, doloribus error corporis harum, illum esse sint eligendi, incidunt impedit.

В том случае, если у нас есть необходимость показать/спрятать блок, у которого задан и display: none, и display: flex, использование переключения класса будет также неплохим выходом, например так:

Показать 1 flex-блок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, excepturi.
Porro tempora dignissimos deserunt eius in sed, alias provident accusamus?
Eos iure tenetur, accusantium adipisci possimus consequatur atque animi et!

Показать 2 flex-блок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, impedit!
Accusamus itaque quia quaerat quisquam aspernatur earum est aut odit.
Expedita nemo iure alias quaerat cum maiores, accusamus nihil minima.

Показать 3 flex-блок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, dolore!
Incidunt autem nesciunt dolore maxime veritatis architecto officia eius dolorum.
Consequuntur dolorum tempora fugit in aspernatur, nemo dicta non atque.

Код примера практически тот же, за исключением селектора, с помощью которого мы выбираем элементы для обработки события клика.

Если совместить 2 предыдущих примера, то код можно сократить, просто указав нужные селекторы в первой строке JS-кода:

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

Использование offsetHeight и/или offsetWidth элемента

Когда элемент скрыт, его высота и ширина = 0. Поэтому можно проверить значения этих свойств на совпадение с 0 или на false|true - и действовать в соответствии с этими показателями. Однако проверять мы будем не стилевые свойства, как в примере выше, а значение offsetHeight или offsetWidth элемента. Если любое из них равно 0, то элемент скрыт.

Кликните, чтобы узнать, откуда появился Lorem Ipsum?

Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.

Почему Lorem Ipsum используется?

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).

Код примера:

Варианты значений css-свойства display

В таблице вы найдете варианты значений css-свойства display, которые можете использовать в скриптах и CSS.

ЗначениеОписание
blockЭлемент рендерится браузером, как блочный
flexЭлемент рендерится, как гибкий со свойствами Flexbox-модели. Был добавлен в CSS3
inlineЭлемент рендерится как строчный (inline)
inline-blockЭлемент рендерится как строчно-блочный (inline-block)
inline-flexЭлемент рендерится, как гибкий, но с шириной, равной контенту. Был добавлен в CSS3
inline-gridЭлемент рендерится каккак контейнер-сетка, но без переноса строки до и после него.
inline-tableЭлемент рендерится как таблица (подобно тегу <table>), без перевода строки до или после таблицы
inline-gridЭлемент рендерится, как контейнер-сетка
list-itemЭлемент рендерится, как элемент списка (<li>)
noneЭлемент не отображается и не реагирует на события
tableЭлемент рендерится, как блочная таблица (подобно тегу <table>), с переносом строки до и после таблицы
table-captionЭлемент рендерится, как заголовок таблицы (подобно тегу <caption>)
table-cellЭлемент рендерится, как ячейка таблицы (подобно тегам <td> и <th>)
table-columnЭлемент рендерится, как столбец ячеек (подобно <col>)
table-column-groupЭлемент рендерится, как группа из одного или нескольких столбцов таблицы (подобно <colgroup>)
table-footer-groupЭлемент рендерится, как строка нижней части таблицы (подобно <tfoot>)
table-header-groupЭлемент рендерится, как строка для заголовочной части (шапки) таблицы (как <thead>)
table-rowЭлемент рендерится, как строка таблицы (как тег <tr>)
table-row-groupЭлемент рендерится, как группа строк таблицы, например, <tbody>
initialУстанавливает значение свойства по умолчанию. Например, для блочных элементов - block, для строчных - inline
inheritНаследуется от родителя

Изменение свойства display с none на block в CSS

В CSS вы можете использовать для переключения видимости скрытый элемент checkbox (флажок) вместе с label, для которой можно менять значение пседоэлемента ::before или ::after. Причем в псевдоэлементе для label будет меняться только текст (Показать/Скрыть), а собственно показывать или скрывать мы будем элемент, следующий сразу за label. В примере это обычный div без атрибутов class или id, которые вы можете добавить самостоятельно.

Работать CSS-код будет за счет применения родственного селектора в виде ~ и псевдокласса :checked для флажка.

Тестируем пример:

Maxime facilis distinctio possimus temporibus porro eum voluptate in repellendus animi ullam, cumque, ratione quaerat dignissimos ab saepe recusandae numquam minus. Officiis esse culpa exercitationem, quidem perspiciatis amet ad, veniam cum nostrum repellendus magni est quae ipsam itaque assumenda similique?

Рассмотрим пример с появлением текста с анимацией типа @keyframes, благодаря которой у нас будет проявляться div c помощью изменения свойства opacity от 0 до 1 за 2 секунды.

Тестируем пример с анимацией:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam et, sit delectus quasi illum vitae, natus eos error dolore repellat facere reiciendis a quisquam voluptas assumenda esse aliquid pariatur officiis.

Текст примеров взят с сайта ru.lipsum.com.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *