display none css как отменить

Свойства 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 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

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