Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о 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> |
Тестируем пример с анимацией:
Использование атрибута 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.0
Текст примеров взят с сайта ru.lipsum.com.
