Display js style: HTML DOM Style display Property

Содержание

Правильный способ переключения отображения с помощью 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 , вы можете добавить другое событие, например 9.0025 сенсорный пуск и т. д.

 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.warn(`toggleDisplay: Убедитесь, что элементы target и trigger существуют в DOM.`)

Заключение

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

Затем мы создали расширенный метод для отображения/скрытия элементов по событию клика. Это можно развить дальше и добавить чистый JavaScript SlideToggle для анимированного переключения.

Встроенная стилизация с помощью React | Pluralsight

Десмонд Ньямадор

31 июля 2020 г.
5 минут чтения
280 575 просмотров

31 июля 2020 г.
5 минут чтения
280 575 просмотров

Веб-разработка

Интерфейсная веб-разработка

Клиентская платформа

Введение

Во внешних проектах, которые редко требуют использования одностраничного приложения, встроенные стили элементов DOM часто помещаются в style=" property:value" атрибут целевого элемента. Но в React все совсем по-другому, когда дело доходит до встроенного стиля. В этом руководстве основное внимание уделяется тому, как именно этого добиться, используя реальный пример создания компонента карты профиля пользователя.

Начнем!

Стилизация компонентов в React

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

 1import React from "react"
2импорт '. /style.css'
3
4 функция мой компонент () {
5 возврат(
6
7 вернуть Текст в стиле ClassName
8 )
9}

jsx

 1.абзац-текст{
2 шрифта: полужирный;
3 цвета: бежевый;
4}

css

Встроенные стили

Достижение тех же результатов с помощью встроенных стилей работает совсем по-другому. Чтобы использовать встроенные стили в React, используйте атрибут стиля, который принимает объект Javascript со свойствами camelCased. Пример:

 1функция МойКомпонент(){
2
3return  Встроенный стилизованный компонент
4
5}

jsx

Обратите внимание, что значение padding не имеет единицы измерения, поскольку React добавляет суффикс «px» к некоторым числовым свойствам встроенного стиля. В случаях, когда вам необходимо использовать другие единицы измерения, такие как ’em’ или ‘rem’, укажите единицу измерения со значением явно в виде строки. Применение этого к свойству заполнения должно привести к заполнение: '1.5em' . Кроме того, эти стили не имеют автоматических префиксов поставщиков, поэтому вам придется добавлять префиксы поставщиков вручную.

Повышение удобочитаемости

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

 1const myComponentStyle = {
2 цвет: «синий»,
3 линияВысота: 10,
4 отступ: '1.5em',
5}
6
7функция МойКомпонент(){
8
9return  Компонент со встроенным стилем
10
11}

jsx

Создание компонента карты

Хватит болтать! Давайте создадим компонент карты пользователя.

 1const cardStyles = {
2 контейнер: {
3 дисплей: "гибкий",
4 высота: 100,
5 ширина: 400,
6 boxShadow: "0 0 3px 2px #cec7c759",
7 alignItems: "по центру",
8 набивка: 20,
9 границРадиус: 20,
10 },
11 профильКартинка: {
12 дисплей: "гибкий",
13 justifyContent: "по центру",
14 alignItems: "по центру",
15 backgroundColor: "оранжевый",
16 цвет: "белый",
17 рост: 20,
18 ширина: 20,
19границаРадиус: "50%",
20 отступ: 10,
21 fontWeight: "полужирный",
22 },
23 био: {
24 поляСлева: 10,
25 },
26 имя пользователя: {
27 fontWeight: "полужирный",
28 },
29};
30
31функция userCardComponent(){
32
33   container}>
34 D
35 
36 Десмонд Ньямадор
37 Я только что узнал простой способ стилизации компонентов React
38 
39
40
41}

jsx

Полезное правило

Официальная документация React не одобряет использование встроенных стилей в качестве основного средства оформления проектов и вместо этого рекомендует использовать атрибут className .

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

стиль