Как отключить display none javascript
Перейти к содержимому

Как отключить display none javascript

  • автор:

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 
Невидимый div (
Я - невидим!
) Стоит внутри скобок

Значение block

  • Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
  • Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

.

 
Первый
Второй

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

  • Элементы располагаются на той же строке, последовательно.
  • Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

 
Инлайн
Блок
Инлайн

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

  • Располагается в строке.
  • Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

  • Элемент всегда прямоугольный.
  • Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

 

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div 
Элемент
С неизвестной
Высотой

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Пункт 1

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.

Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 

Про пчёл.

Пчёлы - отличные создания, они делают мёд.

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

как скрыть элемент в js

Есть несколько способов скрыть элемент на js, основанные на применении стилей. Например, можем задать определенное CSS-правило для атрибута style самого элемента:

  1. Используя display: none
  2. Используя visibility: hidden

Оба эти способа скрывают элемент, но разница в том, что элемент, скрытый с помощью display: none , не занимает места на странице, в отличие от visibility: hidden .

Рассмотрим вариант применения этих стилей, но с использованием имен CSS-классов и методов classList.add() , classList.remove() для их добавления и удаления. Создадим класс с именем hidden, который содержит свойства для скрытия элемента:

.hidden  display: none; > 

Затем, чтобы скрыть элемент с помощью этого класса, добавим его к элементу:

document.getElementById('myElement').classList.add('hidden'); 

Чтобы показать элемент снова, удалим класс:

document.getElementById('myElement').classList.remove('hidden'); 

Такой подход может быть более гибким и удобным в использовании, особенно если вы работаете с множеством элементов на странице.

Как отключить display none javascript

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Определим есть ли у элемента display none при загрузке

Вариант №1 — в блоке нет display none

Для иллюстрации проверки display none при загрузке нам потребуется какой то элемент, блок, див:

Далее нам нужен скрипт, который и определит есть ли в данном блоке, display none, создаем условие if, в котором проверяем есть ли в данном диве с id = example , атрибут style , со значением display и равно ли оно none

if(example . style . display == «none»)

Если условие выполняется, то заменим слова Привет мир! с помощью innerHTML на слова -> Блок имеет display none , иначе(else) отправим туда же Блок не имеет display none

if(example . style . display == «none»)

example .innerHTML = «Блок имеет display none»; //строка 4

example .innerHTML = «Блок не имеет display none»;//строка 8

Привет мир!

Вариант №2 — в блоке есть display none

Во второй проверке на display none в блоке заранее разместим атрибут style со значением:

Привет мир!

И поскольку id = example_1 будет невидимый, то нам понадобится какой-то второй блок, в который и будем отправлять наше сообщение, о существовании или не существовании в блоке example_1 display none:

Соберем весь код вместе:

if(example_1. style . display == «none»)

example_2.innerHTML = «Блок имеет display none»; //строка 4

example_2.innerHTML = «Блок не имеет display none»;//строка 8

Привет мир!

Как добавить display none при клике

1). Нам опять нужен подопытный блок(выделим его красным бордюром. ):

привет мир!

2). Нам понадобится кнопка, по нажатию которой мы будем добавлять display none

3). Нам потребуется одни из 4 вариантов onclick, который будет на кнопке

id_button. onclick = function()

Соберем весь код вместе:

id_button. onclick = function()

привет мир!
Нажми на меня

Как удалить display none при клике

Чтобы удалить display none при клике нужно проделать ту же операцию. что была приведена выше, только мы добавляли display none, теперь будем удалять display none, нашего блока, по умолчанию не будет видно! И при удалении none блок покажется на экране.

Код удаления display none в сборе:

id_button_1. onclick = function()

привет мир!
Нажми на меня

Как добавить и удалить display none при клике

Теперь рассмотрим, как добавить и удалить одной кнопкой display none при клике

Для этого нам понадобится вся выше приведенная информация, все это скрестить и получится требуемый скрипт!

1). Возьмем очередной блок, див, элемент:

2). Выделим красный бордюр в отдельные стили, иначе работать не будет:

3). Нам понадобится кнопка, по нажатию на которую, будем удалять, добавлять display none при клике

Мы возьмем условие из первого пункта, в случае, если в блоке присутствует display == «none», то будем присваивать :

example_5.style . display= «»;
example_5.style . display = «none»;

Соберем весь код вместе:

if(example_5. style . display == «none»)

example_5.style . display = «none»;

Результат работы скрипта, удаление + добавление display == «none»

привет мир!
Нажми на меня

Где скачать готовый скрипт добавить и удалить display none при клике

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

Не стесняемся говорить спасибо!

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

Как в css отменить ‘display: none’?

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

.xsmall-hidden < display: none; >.xsmall-visible

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

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

  • Вопрос задан более трёх лет назад
  • 17966 просмотров

Комментировать
Решения вопроса 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

ну логику я надеюсь ты понял
Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer

Просто и красиво сделать можно (будет в будущем)

А пока что IE про это значение не знает caniuse.com/#feat=css-initial-value

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

0example

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

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

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