Display style js: HTML DOM Style display Property

 document.getElementById("someElementId").style.display = "блокировать";
 

 document.getElementById("myDIV").style.display = "блок";
 

, который по умолчанию скрыт ( display: none ). Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).

Что такое встроенный CSS?

Встроенный CSS используется для применения уникального стиля к одному элементу HTML. Встроенный CSS использует атрибут стиля HTML-элемента.

Правильный способ переключения дисплея с помощью JavaScript

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

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

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

Фотография Марин Вандеворде

Быстрый и грязный JavaScript, чтобы показать/скрыть вещи

Давайте создадим простой метод для получения элемента в качестве аргумента и переключения его отображения.

 const toggleDisplay = target => target.style.display =
  (target.style.display == 'нет')?
    'блокировать' :
    'нет' 

Выше показан традиционный способ показать или скрыть любой элемент HTML с помощью простого JavaScript. Он ищет свойство CSS display в DOM и обновляет его в соответствии с базовой логикой переключения всякий раз, когда нажимается триггер.

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

 <дел>...
<кнопка
 >
    Переключить отображение
 

Выше приведен базовый HTML-код, необходимый для реализации метода toggleDisplay .

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

Проблема

Эта проблема пока не очень заметна. Предположим, мы используем эту функцию с элементом со свойством отображения сетки. У меня есть демонстрация, подготовленная для того, чтобы вы заметили эту проблему.

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

Исправление

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

 констант
  toggleDisplay = (триггер, цель, defaultDisplay = 'блок') => {
  ...
} 

Как обсуждалось выше, добавление отображения по умолчанию в качестве встроенного CSS устраняет первую проблему. Еще один способ сделать это — добавить отображение по умолчанию с объектом стиля DOM.

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

сенсорный пуск и т. д.

 const toggleDisplay = (триггер, цель, defaultDisplay = 'блок') => {
    target.style.display = дисплей по умолчанию
  trigger.addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
        по умолчаниюДисплей:
        'никто'
  }) 
} 

Посмотреть в действии можно здесь. Единственная проблема с этим заключается в том, что вам нужно указать отображение по умолчанию вручную.

Расширенное переключение отображения JavaScript

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

Простой способ создать лучшее решение для переключения отображения — определить скрытые и видимые классы в CSS, а затем переключать их с помощью функции переключения classList API.

Но тогда у него будет еще одна зависимость для правильной работы: классы CSS. Мы, конечно, можем сделать лучше, чем это.

Лучшим подходом в этом случае было бы удаление обсуждавшихся выше зависимостей. Давайте возьмем отображение по умолчанию из таблиц стилей автора (или пользовательского агента, если определения CSS автора недоступны) непосредственно с помощью веб-API getComputedStyle.

 пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display') 

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

  const toggleDisplay = (цель, триггер) => { 
  пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display')
    trigger. addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
      по умолчаниюДисплей:
      'никто'
  })
}  

См. демонстрацию в реальном времени

Дальнейшие улучшения

Мы можем добавить проверку DOM для цели и триггерных элементов. Это убережет нас от ошибок, если один из этих элементов недоступен в DOM.

 const toggleDisplay = (цель, триггер) => {
    если(!цель || !триггер) вернуть 
  пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display')
  trigger.addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
      по умолчаниюДисплей:
      'никто'
  })
} 

Приведенный выше код не приведет к ошибке, даже если вы предоставите несуществующие ссылки на функцию toggleDisplay . В качестве альтернативы вы можете добавить предупреждение, подобное этому, чтобы помочь пользователю:

 console.