Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о css-свойстве объекта display. Обычно мы проверяем на соответствие этого свойства значению block или none, однако, сейчас появились другие значения этого свойства, например, inline-block, flex, grid.
Проверка на стилевое свойство display: none
Если у вас для элемента явно назначено стилевое свойство display: none, то вы можете легко изменять это свойство на display: block или flex, или grid по необходимости. Что значит "явно назначено стилевое свойство"? Это подразумевает наличие атрибута style="display: none" непосредственно в том теге, который вы хотите впоследствии отображать, как правило при клике на другом элементе, расположенном в непосредственной близости от скрытого.
Например, у вас есть такой код:
|
1 2 3 4 5 6 7 8 9 10 |
<h3 id="what-lorem-ipsum-header">Кликните, чтобы узнать, что такое Lorem Ipsum?</h3> <p style="display: none">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. ... Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн..... в шаблонах которых используется Lorem Ipsum.</p> <script> let h3 = document.getElementById('what-lorem-ipsum-header'); h3.onclick = function(){ this.nextElementSibling.style.display = this.nextElementSibling.style.display == 'none' ? 'block' : 'none' ; } </script> |
В этом коде для изменения стилевого свойства display для элемента мы используем тернарный оператор вместо конструкции if...else.
Рабочий пример:
Кликните, чтобы узнать, что такое Lorem Ipsum?
Минусом такого подхода является то, что явное назначение стилевого свойства в виде атрибута style="display: none" бывает крайне редко в верстке. Чаще оно добавляется в коде JavaScript, и им же потом и удаляется.
Определяем свойство display, описанное во внешнем css-файле
Если же display: none установлен в css-стилях во внешнем файле или общих тегах <style> для данной страницы, то нужно использовать метод window.getComputedStyle(), который позволяет добраться до стилевых свойств определенного элемента, которые описаны не в нем самом. А затем используем для переключения видимости спрятанного элемента код, похожий на предыдущий вариант.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h3 id="find-lorem-ipsum">Где взять Lorem ipsum</h3> <p class="hide-me">Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые ... середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или "невозможных" слов.</p> <script> let findH3 = document.getElementById('find-lorem-ipsum'); findH3.onclick = function(){ let p = this.nextElementSibling; let display = window.getComputedStyle(p, null).getPropertyValue("display"); //console.log(display); p.style.display = p.style.display =='none' || display =='none' ? 'block': 'none'; } </script> |
Примечание: вместо display: block вы можете использовать display: flex или grid.
Проверяем работоспособность примера:
Где взять Lorem ipsum
Добавление/удаление класса со свойством display: none
Для работы с последующими примерами нам понадобится описать ряд css-правил для различных классов, чтобы понимать, какие изменения происходят при добавлении/удалении какого-либо класса.
CSS-стили
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.hide-me {display: none; } .hidden-block { display: none !important; } .d-flex { display: flex; justify-content: space-between; } .block { flex: 0 0 30%; border: 1px solid #3f9ed0; padding: 10px; } .test dt, h3 { cursor: pointer; font-size: 1.2em; color: #3f9ed0;} .test dd { margin: 10px; color: #999; } .orange {color: #f90 !important;} |
Пример с переключением класса со свойством display: none !important
Когда в любое css-свойство вы добавляете !important, это означает, что оно переопределяет даже те свойства, которые назначены в атрибуте style, повышая таким образом приоритет данного свойства для атрибута class. Поэтому здесь имеет смысл использовать такое JavaScript-свойство, как classList, которое содержит псевдомассив из всех классов, назначенных для данного элемента. Свойство classList имеет в своем арсенале замечательный метод toggle('имя_класса'), который работает, как переключатель классов: если указанный в скобках класс назначен данному элементу, он его убирает, если нет - добавляет. Именно им мы и воспользуемся в примере ниже для переключения видимости спрятанных изначально элементов списка <dd class="hidden-block">:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<dl class="test"> <dt class="lorem-header"><span>Показать</span> абзац 1 с Lorem ipsum</dt> <dd class="hidden-block">Lorem ipsum dolor sit amet, ... magnam harum, hic quas sint odit, facilis.</dd> <dt class="lorem-header"><span>Показать</span> абзац 2 с Lorem ipsum</dt> <dd class="hidden-block">Delectus, repellendus, quaerat? ... quae dolores.</dd> <dt class="lorem-header"><span>Показать</span> абзац 3 с Lorem ipsum</dt> <dd class="hidden-block">Natus culpa voluptas velit unde ... quam quae!</dd> <dt class="lorem-header"><span>Показать</span> абзац 4 с Lorem ipsum</dt> <dd class="hidden-block">Dolorem ab, expedita est ducimus ... veritatis laboriosam porro corporis eos.</dd> <dt class="lorem-header"><span>Показать</span> абзац 5 с Lorem ipsum</dt> <dd class="hidden-block">Quas quam, facere. Itaque,... illum esse sint eligendi, incidunt impedit.</dd> </dl> <script> let allDT = document.querySelectorAll('.test dt'); allDT.forEach( dt => dt.onclick = function(){ this.firstElementChild.textContent = this.firstElementChild.textContent=='Показать' ? 'Спрятать': 'Показать'; this.nextElementSibling.classList.toggle('hidden-block'); this.classList.toggle('orange'); }) </script> |
- Показать абзац 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-блок
Показать 2 flex-блок
Показать 3 flex-блок
Код примера практически тот же, за исключением селектора, с помощью которого мы выбираем элементы для обработки события клика.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<h3 class="show-flex"><span>Показать</span> 1 flex-блок</h3> <div class="d-flex hidden-block"> <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, excepturi.</div> <div class="block">Porro tempora dignissimos deserunt eius in sed, alias provident accusamus?</div> <div class="block">Eos iure tenetur, accusantium adipisci possimus consequatur atque animi et!</div> </div> <h3 class="show-flex"><span>Показать</span> 2 flex-блок</h3> <div class="d-flex hidden-block"> <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, impedit!</div> <div class="block">Accusamus itaque quia quaerat quisquam aspernatur earum est aut odit.</div> <div class="block">Expedita nemo iure alias quaerat cum maiores, accusamus nihil minima.</div> </div> <h3 class="show-flex"><span>Показать</span> 3 flex-блок</h3> <div class="d-flex hidden-block"> <div class="block">Lorem ipsum dolor sit ame ....adipisicing elit. Reprehenderit, dolore!</div> <div class="block">Incidunt autem nesciunt dolore maxime veritatis architecto officia eius dolorum.</div> <div class="block">Consequuntur dolorum tempora fugit in aspernatur, nemo dicta non atque.</div> </div> <script> let showHeader = document.querySelectorAll('.show-flex'); showHeader.forEach(header => header.onclick = function() { this.firstElementChild.textContent = this.firstElementChild.textContent == 'Показать' ? 'Спрятать' : 'Показать'; this.nextElementSibling.classList.toggle('hidden-block'); this.classList.toggle('orange'); }) </script> |
Если совместить 2 предыдущих примера, то код можно сократить, просто указав нужные селекторы в первой строке JS-кода:
|
1 2 3 4 5 6 7 |
<script> let showHeader = document.querySelectorAll('.test dt, .show-flex'); showHeader.forEach(header => header.onclick = function() { this.firstElementChild.textContent = this.firstElementChild.textContent == 'Показать' ? 'Спрятать' : 'Показать'; this.nextElementSibling.classList.toggle('hidden-block') }) </script> |
Возможно, вам будет интересно узнать, как решается проблема отображения/скрытия элементов в Bootstrap с помощью разных классов, в том числе и для разных разрешений экранов.
Использование offsetHeight и/или offsetWidth элемента
Когда элемент скрыт, его высота и ширина = 0. Поэтому можно проверить значения этих свойств на совпадение с 0 или на false|true - и действовать в соответствии с этими показателями. Однако проверять мы будем не стилевые свойства, как в примере выше, а значение offsetHeight или offsetWidth элемента. Если любое из них равно 0, то элемент скрыт.
Кликните, чтобы узнать, откуда появился Lorem Ipsum?
Почему Lorem Ipsum используется?
Код примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<h3 id="offsetHeight-check-header">Кликните, чтобы узнать, откуда появился Lorem Ipsum?</h3> <div class="hide-me"> <p>Многие думают, что Lorem Ipsum - взятый с потолка ... из строк в разделе 1.10.32</p> <p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже... ackham, 1914 год.</p></div> <h3 id="offsetWidth-check-header">Почему Lorem Ipsum используется?</h3> <div class="hide-me">Давно выяснено, что при оценке дизайна и композиции ... (например, юмористические варианты).</div> <script> let offsetHeightHeader = document.getElementById('offsetHeight-check-header'), offsetWidthHeader = document.getElementById('offsetWidth-check-header'); offsetHeightHeader .onclick = function(){ this.nextElementSibling.style.display = this.nextElementSibling.offsetHeight == 0? 'block' : 'none'; } offsetWidthHeader .onclick = function(){ this.nextElementSibling.style.display = !this.nextElementSibling.offsetWidth ? 'block' : 'none'; } </script> |
Варианты значений css-свойства display
В таблице вы найдете варианты значений css-свойства display, которые можете использовать в скриптах и CSS.
| Значение | Описание |
|---|---|
block |
Элемент рендерится браузером, как блочный |
flex |
Элемент рендерится, как гибкий со свойствами Flexbox-модели. Был добавлен в CSS3 |
inline |
Элемент рендерится как строчный (inline) |
inline-block |
Элемент рендерится как строчно-блочный (inline-block) |
inline-flex |
Элемент рендерится, как гибкий, но с шириной, равной контенту. Был добавлен в CSS3 |
inline-grid |
Элемент рендерится каккак контейнер-сетка, но без переноса строки до и после него. |
inline-table |
Элемент рендерится как таблица (подобно тегу <table>), без перевода строки до или после таблицы |
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 для флажка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> input#show-hide { display: none;} label[for="show-hide"]::before { content: 'Показать блок'; } #show-hide:checked + label::before { content: 'Скрыть блок'; } #show-hide:checked ~ div { display: block; } #show-hide:not(:checked) ~ div { display: none; } </style> ------------------- <input type="checkbox" name="show-hide" id="show-hide"> <label for="show-hide"></label> <div>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?</div> |
Тестируем пример:
Рассмотрим пример с появлением текста с анимацией типа @keyframes, благодаря которой у нас будет проявляться div c помощью изменения свойства opacity от 0 до 1 за 2 секунды.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> input { display: none;} label::before { content: 'Показать контент'; } #toggle:checked + label:before { content: 'Скрыть'; } #toggle:checked ~ div { animation: fadeIn 2s ease-out forwards; } #toggle:not(:checked) ~ div { display: none; } @keyframes fadeIn{ 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } </style> -------------------- <input type="checkbox" name="toggle" id="toggle"> <label for="toggle"></label> <div>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.</div> |
Тестируем пример с анимацией:
Использование CSS-свойства transition-behavior для анимации отображения/скрытия элемента
До недавнего времени появление или исчезновение элемента при использовании изменения свойства с display: block на display: none было невозможно анимировать с помощью свойства transition. Этот переход происходил резко, анимация, которую вы прописывали в свойствах, видна не была. Выходом было использование свойств animation и @keyframes, либо использование свойств visibility+opacity (например, для анимации выпадающих меню). Но теперь у нас есть css-свойство transition-behavior со значением allow-discrete, которое позволяет отобразить плавно появление элемента из display: none.
Прочитать подробнее о нем можно пока только на английском на MDN или на русском в Chrome for Developers. Посмотреть информацию о поддержке браузерами данного свойства можно, как всегда, на caniuse.com.
Принцип использования свойства такой:
|
1 2 3 4 5 6 7 8 9 10 |
.element { transition-property: opacity, display; transition-duration: 0.25s; transition-behavior: allow-discrete; } .element.fade-out { opacity: 0; display: none; } |
То есть в основных свойствах элемента задаем transition-behavior: allow-discrete, а при добавлении класса fade-out (или любого другого) - свойства opacity: 0 и display: none. Вместо opacity может быть свойство transform, которое позволяет скрыть элемент (например, со значением scale(0)).
В этом случае у вас будет срабатывать только анимация при исчезновении элемента, т.е. при переходе из display: block к display: none. Для появления элемента анимация уже проигрываться не будет.
Пример вживую:
See the Pen Example transition-behavior: allow-discrete by Elen (@ambassador) on CodePen.
Для отображения анимации появления со сменой свойств с display: none к display: block вам понадобиться указать свойство @starting-style:
|
1 2 3 4 5 6 |
@starting-style { .element { opacity: 0; height: 0; } } |
В примере выше это свойство закомментировано. Раскомментируйте его, чтобы посмотреть на анимацию при появлении элемента.
Еще один пример демонстрирует анимацию при удалении и добавлении элементов в DOM-структуру страницы.
See the Pen Item transitions by Elen (@ambassador) on CodePen.
В следующем примере эти свойства реализованы при добавлении к элементу атрибута open, как в элементе details, о котором речь пойдет ниже.
See the Pen Transition to "height: auto;" and "display: none;" Using Pure CSS by Elen (@ambassador) on CodePen.
Использование элемента details в HTML-разметке
В общем-то можно не слишком даже утруждать себя JavaScript-ом. На самом деле в спецификации HTML описан элемент details, который вместе с вложенным в него элементом summary позволит вам реализовать раскрытие и скрытие части текста при клике на некий условный заголовок. Разметка его такова:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<details> <summary> Как работает аккордеон? </summary> <p>Он переключает сворачиваемый контент в зависимости от взаимодействия с пользователем.</p> </details> <details> <summary> Почему мне следует использовать аккордеон? </summary> <p>Это помогает улучшить взаимодействие с пользователем, предоставляя сжатую информацию в удобной для чтения форме.</p> </details> |
Пример того, как выглядит эта разметка без дополнительных стилей:
See the Pen HTML-Only Accordion by Elen (@ambassador) on CodePen.
У открытого элемента есть атрибут open (в закрытом он отсутствует). Он-то и поможет нам стилизовать внешний вид <details>. Т.е. в момент, когда вы щелкаете по видимому элементу <summary>, его родительский элемент в разметке выглядит так: <details open="">. Собственно, нужно воспользоваться селектором атрибута и превратить этот элемент в полноценный аккордеон:
See the Pen HTML-Only Accordion (Using the details Element) by Elen (@ambassador) on CodePen.
Таким образом мы получаем готовое решение для аккордеона совсем без JavaScript.
Пример с анимацией при отображении/скрытии элементов в details. Автор OlgaKoplik.
See the Pen Simple accordion CSS only by Elen (@ambassador) on CodePen.
Использование атрибута area-expanded в JavaScript и CSS
Еще один способ управления отображением элемента завязан на использовании атрибута area-expanded, который как раз предназначен для того, чтобы показывать, развернут или свернут текущий элемент. Рассматривать его применение мы будем на примере аккордеона для блока страницы с FAQ (Frequently Asked Question(s) - часто задаваемые вопросы), который довольно часто встречается на сайтах. В данном случае название аккордеон - это уже устоявшееся наименование для такого рода блоков, в которых при клике на заголовок раскрывается текст, расположенный ниже.
Атрибут aria-expanded является одним из атрибутов группы ARIA (от Accessible Rich Internet Applications, или Доступные многофункциональные интернет-приложения). ARIA — это подмножество атрибутов HTML (обычно с префиксом aria-), которые позволяют таким программам, как чтение с экрана для слабовидящих, распознавать элементы на ваших html-страницах.
В примере ниже у нас есть ряд элементов типа button с атрибутом aria-expanded="false".
|
1 2 3 4 |
<button aria-expanded="false"> <span class="accordion-title">Why is the moon sometimes out during the day?</span> <span class="icon" aria-hidden="true"></span> </button> |
Внутри button расположен текст заголовка и иконка с плюсом или минусом в зависимости от того, какое значение у aria-expanded для button. Она тоже имеет атрибут типа ARIA в виде aria-hidden="true". Такое значение атрибута показывает, что эта иконка будет скрыта для программ чтения с экрана, т.е. уведомлять о ее наличии такая программа не будет. Для обычных же пользователей эта иконка является дополнительным элеменотом оформления аккордеона.
JavaScript-код отвечает за обработку кликов по кнопкам в плане изменения значения aria-expanded с "false" на "true" и наоборот. В зависимости от этого CSS-стили позволяют отображвть или скрывать текст в блоках <div class="accordion-content"> с использованием transition-анимации. Получается валидный код с учетом особенностей форматирования контента для слабовидящих с минимумом JavaScript-кода.
При тестировании примера, нажмите на любую из вкладок HTML, CSS, JS, чтобы отобразить нужный код, или перейдите на codepen.io кликом ко кнопке 
.
See the Pen FAQ Accordion with area-expanded property by Elen (@ambassador) on CodePen.
Текст примеров взят с сайта ru.lipsum.com.
