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

Leave a Comment / Разное / By /

javascript — Выполнение JS внутри div с display:none

Вопрос задан

Изменён 6 месяцев назад

Просмотрен 74 раза

Не смог найти информацию, но хочется освежить в памяти следующий момент.
Имеем какую-то HTML структуру. JS в виде интеграции с внешним сервисом.

<html>
...
 <div>
   <script src="..."></script>
 </div>
...
</html>

Верно ли утверждение, что браузер по мере загрузки DOM будет выполнять все встречаемые элементы <scrip></script>? Если да — тогда в чем отличие display:none от visible:hide?

Основная суть вопроса: как отложить загрузку <script> до выполнения условия (например наличие класса в body /или/ проверка значения в

localStorage)?

document. addEventListener('DOMContentLoaded') и $(document).ready() не в счет. Так как логика завязана на внешний скрипт

  • javascript
  • html
  • jquery

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

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

Если да — тогда в чем отличие display:none от visible:hide

display:none убирает элемент из базового потока. При этом в DOM-дереве элемент все равно остается. visibility: hidden в прямом смысле делает элемент невидимым. Сравните:

Ничего не трогал:

display: none

visibility: hidden

Основная суть вопроса: как отложить загрузку до выполнения условия (например наличие класса в body /или/ проверка значения в localStorage)?

Обычно, конечно, так не делается в современном фронтенде. Подобные вещи — асинхронная загрузка скрипта on-demand — выполняются на уровне бандлера: code-splitting, tree-shaking и т.п. вещи.

Если же вы твердо уверены, что вам нужно именно то, что вы написали, то смотрите в сторону динамического добавления элемента script на страницу. Раньше иногда действительно именно так и делали. Встраивали в рантайме элемент script с каким-то содержимым на страницу, и только после этого сам скрипт начинал исполняться.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как отображать данные с помощью JavaScript

Akande Olalekan Toheeb

Бесплатный курс для собеседований по проектированию систем

Получите полное руководство по собеседованиям по проектированию систем от Educative бесплатно.

Введение

JavaScript имеет множество API, которые используются для отображения данных в модели DOM. Некоторые из этих API-интерфейсов отображают данные непосредственно на странице, в то время как другие выдают всплывающие оповещения на странице или выводят их на консоль браузера.

В этом кадре мы рассмотрим эти API и объясним, как они работают.

Как отображаются данные?

В JavaScript данные отображаются через:

  • window.alert()
  • окно.промт()
  • документ.запись()
  • внутренний HTML
  • console.log()

window.alert()

Оповещение — это всплывающее окно, отображающее информацию на экране. Мы используем API alert() для отображения предупреждения на экране.

Пример

  • JavaScript
  • Вывод

Пример API «window. alert()» экран.

window.prompt()

API prompt() аналогичен API alert() , за исключением того, что он требует ввода.

Пример

  • JavaScript
  • Вывод

Пример API «window.prompt()»

Приведенный выше код запрашивает ввод имени с помощью API prompt() , который мы настроили в строке 1. Затем он принимает имя, которое мы вводим по порядку. чтобы отобразить его как предупреждение, которое мы настроили в строке 2.

document.write()

document.write() API печатает или пишет непосредственно на странице.

Пример

  • JavaScript
  • Вывод

Пример API «document.write()»

innerHTML

API innerHTML используется для изменения содержимого элемента в DOM. Он обычно используется с API document.getElementById('id') , чтобы получить элемент и затем изменить его.

Example

  • HTML
  • JavaScript
  • Output

Пример API «innerHTML»

Строка 5 раздела HTML представляет собой абзац с идентификатором id и содержимым.

В строке 1 раздела JavaScript содержимое было изменено с помощью innerHtml API.

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

console.log()

console.log() API выводит все, что находится внутри скобок, в консоль браузера.

Пример

Консоль

Пример API «console.log()»

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

Связанные теги

JavaScript

Apportor

Akande Olalekan Toheeb

Лицензия: Creative Commons-Attribution-Sharealive 4. 0 (CC-By-Sa 4.0)

Правильный способ отображения с Javascript

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

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

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

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

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

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

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

Выше показан традиционный способ показать или скрыть любой элемент HTML с помощью простого JavaScript.

Он ищет свойство CSS display в DOM и обновляет его в соответствии с базовой логикой переключения всякий раз, когда нажимается триггер.

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

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

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

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

Проблема

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

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

Исправление

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

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

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

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

click , вы можете добавить другое событие, например touchstart и т. д.

 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.

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

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