Как исправить display none - Исправление недочетов и поиск решений вместе с Examum.ru

Делаю свой микро-css фреймворк. Нужно что-бы при определенном размере экрана — блок исчезал, а при другом — появлялся.

.xsmall-hidden {
display: none;
}
.xsmall-visible {
display: ???;
}

Только вот элемент может быть table, block, block, block-inline и тд. Можно это сделать просто и красиво?

Благодарю за помощь

Вопрос задан

более трёх лет назад
16494 просмотра

Комментировать

Решения вопроса 3

iiiBird

iBird Rose

@iiiBird Куратор тега CSS

Пока ты спишь — твой конкурент совершенствуется

.xsmall-visible {
    display: block;
  }
  table.xsmall-visibles {
    display: table;
  }
  tr.xsmall-visible {
    display: table-row;
  }
  th.xsmall-visible,
  td.xsmall-visible {
    display: table-cell;
  }

ну логику я надеюсь ты понял

Комментировать

block или inline-block, в зависимости от назначения блока, если он должен иметь строчное поведение, то inline-block

Комментировать

Пригласить эксперта

Ответы на вопрос 2

Установите необходимое вам свойство например display: block;

Комментировать

ThunderCat

@ThunderCat Куратор тега CSS

{PHP, MySql, HTML, JS, CSS} developer

если все так сложно используйте visibility: visible | collapse

Комментировать

Похожие вопросы

Показать ещё
Загружается…

30 мая 2023, в 00:55

125000 руб./за проект

30 мая 2023, в 00:34

1000 руб./за проект

29 мая 2023, в 23:21

2000 руб./за проект

Минуточку внимания

Источник

I have this situation in my code:

<!-- This is the global CSS file -->
<style type="text/css">
#show_div{
    display: none;
}
</style>
<!-- This is the local CSS file (only in this page)-->
<style type="text/css">
#show_div{
    /* However to disable display: none;*/  
}
</style>
<body>
<div id = "show_div">
    Text text
</div>

I usually need to hide this element, but on one page, I need to show it. In global css file I have:

#show_div{
    display: none;
}

How can I disable display: none;?
I can not use jQuery, $('#show_div').show(); (or JavaScript).

Thanks

If you do not understand my problem, then I apologize. I can try to explain again.

Источник

На чтение 6 мин. Просмотров 363 Опубликовано 15.12.2019

Свойства HTML display и visibility используются, чтобы вывести или скрыть HTML-элементы . Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :

Мы используем три элемента div , которые показаны в разделе 1 ( с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .

Посмотреть онлайн демо-версию и код

Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.

Посмотреть онлайн демо-версию и код

В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.

Посмотреть онлайн демо-версию и код

Содержание

Синтаксис свойства CSS visibility
Синтаксис свойства CSS display
Пример применения свойства display для отображения / скрытия меню
Демо-версия меню с использованием свойства visibility
Пример использования свойства CSS visibility для HTML-таблицы
Применение свойства CSS display к таблице
Использование display для строчных элементов

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility :

Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:

Данное значение используется в HTML-таблицах .

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div , который содержит маркированный список

, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.

При клике по ссылке скрыть меню для события клика используется код JQuery , чтобы применить свойство display: none к родительскому элементу div :

Посмотреть онлайн демо-версию и код

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial . Это сделает меню видимым, а ссылки сместятся вниз.

Демо-версия меню с использованием свойства visibility

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible , и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).

Пример использования свойства CSS visibility для HTML-таблицы

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 ( первый столбец слева ).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .

Применение свойства CSS display к таблице

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

Родительский div очерчен черной рамкой и занимает всю доступную ширину;
span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span .

Данная публикация представляет собой перевод статьи « CSS display and visibility: 6 examples to show/hide HTML elements » , подготовленной дружной командой проекта Интернет-технологии.ру

Сделаю минимальный пример:

Вопрос именно про display: none , поэтому способы прозрачности и нулевой высоты взамен данного свойства не предлагать. Анимация конечно же может содержать в себе opacity , height , width , transform и прочие стили. При помощи JS, особенно с помощью jQuery, это тоже без труда реализуется, но, вопрос именно по CSS.

Если таковых нет, поделитесь, что используете и почему? Например, при сокрытии и отображении подробной информаци или обрезки текста.

Нужно на живом сайте убрать все display: none так как их много в ручную это делать лень. И для отладки придется делать это не 1 раз.

Может есть расширение для хрома какоенибудь для работы с скриптами знаю есть для работы с CSS Stylish

Или было что то подобное для контакта при удалении множества друзей прописывали код прямо в браузер на нужной странице

Источник

Главная
Форумы
Техподдержка Drupal
Решение проблем

Главные вкладки

Просмотр(активная вкладка)
Реакции

VasyOK

23 февраля 2018 в 1:40

Всем привет!

В теме оформления прописано в CSS
.containner .selektor {
display: none;
}

Т.обр. некоторые элементы не показываются.
Есть ли возможность исключить эти скрытые элементы из HTML?

Понимаю, что в Друпале при правильном подходе можно кастомизировать в шаблонах вывод чего угодно, но у меня подход НЕ правильный.

Drupal7
Есть вопрос
Решение проблем

Блог
Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Если убрать всё, что display:none, то первым делом перестанут работать все формы. Думаю, несложно догадаться, почему.
По самому вопросу не ясна постановка: нужно убрать всё скрытое, при этом не трогая шаблоны и темизацию. Конечно же, есть вариант через JS

Однако тут будет совершенно нулевой профит, потому что людям плевать, что там скрыто — его же не видно. А в поисковиках не работает js.

sas@drupal.org

23 февраля 2018 в 10:40

Надо понять нужен ли этот скрытый тег и если не нужен, убрать его на препроцессе.

bumble

23 февраля 2018 в 10:44

Ребят, а где вы про формы видите что?

gun_dose

23 февраля 2018 в 11:49

В заголовке. В любой друпаловской форме почти половина элементов подпадает под критерий «то что display:none»

bumble

23 февраля 2018 в 11:50

Не, я просто думал може я дета не замечаю.
В описании ж нет что это про формы.

ivnish

23 февраля 2018 в 11:55

А я понял вопрос так: у автора есть скрытый с помощью css элемент. Автора это напрягает, он хочет чтобы этого элемента вообще не было в разметке.

bumble

23 февраля 2018 в 11:57

О! и я так понял.

Давай, VasyOK, разконфьюзь нас. Через-чур уж много оперативки задействовано для пятницы Wink

VasyOK

23 февраля 2018 в 19:29

bumble wrote:

Есть навыки парсинга CSS и HTML?

При чем тут парсинг?

gun_dose wrote:

нужно убрать всё скрытое, при этом не трогая шаблоны и темизацию

Не все, а кое что.
Не трогая шаблоны типа block.tpl.php, node.tpl.php
В template.php функцию написать возможно придется. Если конечно модуль для этого не найду.

Форма это или не форма — не принципиально. Это в html.

Если это можно сделать через https://api.drupal.org/api/drupal/includes%21theme.inc/function/template… — можете пример указать.

gun_dose

23 февраля 2018 в 19:38

Что значит не принципиально? За каждый кусок хтмл отвечает отдельный препроцесс и отдельный шаблон.

bumble

23 февраля 2018 в 19:35

VasyOK wrote:

При чем тут парсинг?

При том что нужно распарсить CSS, вытащить из него элементы с display: none;, потом распарсить выплюнутый друпалом хтмл и заменив в нем элементы из первого пункта вернуть в поток.

VasyOK wrote:

Если это можно сделать через https://api.drupal.org/api/drupal/includes%21theme.inc/function/template… — можете пример указать.

Это препроцессор html.tpl.php.

gun_dose

23 февраля 2018 в 19:38

И самый главный вопрос: зачем?

VasyOK

23 февраля 2018 в 23:39

Блин ссылка режется. Через это можно выджратть «не нужный» HTML ?
function template_preprocess_html

Зачем? Ну я экспериментатор. Задача вывести открытые фильтры вьюхи в разных местах страницы. Я вывел один фильтр несколько раз и скрыл лишнее через CSS. Работает, только в HTML мусора много.

Semantics

23 февраля 2018 в 23:48

Есть подозрение, что если вырежешь — то работать уже не будет

gun_dose

24 февраля 2018 в 10:16

Если с умом, а не всё подряд, то будет. Главное же форм айди и токен не прибить.

Semantics

24 февраля 2018 в 10:18

Я пока наблюдаю диссонанс.
Сначала распихать по разным областям страницы фильтры, а потом спрашивать как убрать их оттуда, чтобы не мешали.

Подозреваю, что автору нужно не удалять, а ограничивать, чтобы форма на разных страницах была в разных местах, но про условные операторы ещё неизвестно

gun_dose

24 февраля 2018 в 10:22

А я так понял, что в форме несколько фильтров, и надо каждый фильтр в своём месте вывести, и васёк решил это, выведя несколько раз одинаковую форму, и скрыв в каждой из форм ненужные части.

gun_dose

24 февраля 2018 в 10:20

Можно. Но наверняка не весь. Напиши там dpm(get_defined_vars()) и смотри, что к чему.

VasyOK

23 февраля 2018 в 23:52

Значит нужно его или подтвердить или развеять.

Phantom63rus

24 февраля 2018 в 13:44

А можно ссылку на проект? Меня любопытство съедает где такое требуется:)

Источник

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

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

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

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

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

<h3 id=«what-lorem-ipsum-header»>Кликните, чтобы узнать, что такое Lorem Ipsum?</h3>

<p style=«display: none»>Lorem Ipsum — это текст—«рыба», часто используемый в печати и вэб—дизайне. ...

Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн..... в шаблонах которых используется Lorem Ipsum.</p>

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.

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

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

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

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

<h3 id=«find-lorem-ipsum»>Где взять Lorem ipsum</h3>

<p class=«hide-me»>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые ... середине абзаца.

Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или «невозможных» слов.</p>

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

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

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

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

CSS-стили

.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">:

<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>

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>

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.

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.

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!

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.

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-блок

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

<h3 class=«show-flex»><span>Показать</span> 1 flex—блок</h3>

<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=«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=«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>

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-кода:

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 — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 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 используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации «Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст..» Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам «lorem ipsum» сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые — намеренно (например, юмористические варианты).

Код примера:

<h3 id=«offsetHeight-check-header»>Кликните, чтобы узнать, откуда появился Lorem Ipsum?</h3>

<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>

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 для флажка.

<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>

——————————

<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>

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

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 секунды.

<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>

——————————

<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>

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

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.

Использование атрибута 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".

<span class=«accordion-title»>Why is the moon sometimes out during the day?</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.

Вам может понравиться

Источник

Минуточку внимания

Синтаксис свойства CSS visibility

Синтаксис свойства CSS display

Пример применения свойства display для отображения / скрытия меню

Демо-версия меню с использованием свойства visibility

Пример использования свойства CSS visibility для HTML-таблицы

Применение свойства CSS display к таблице

Использование display для строчных элементов

Главные вкладки

Комментарии

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

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

Где взять Lorem ipsum

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

CSS-стили

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

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

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

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

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

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

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

Использование атрибута area-expanded в JavaScript и CSS

Вам может понравиться

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