Рубрики
Без рубрики

JavaScript 30 – переменные CSS

День 3 JS30 Challenge, где я построил аналоговые часы с CSS и анимировал его CH … с меткой программирования, Web, JavaScript, JavaScript30.

В мой день 3 JS30 Challenge Меня познакомили в первую очередь с переменными CSS, но также и многим другим вещам.

Ключевыми понятиями, которые я узнал из сегодняшнего вызова, были:

  • Переменные CSS
  • Набор данных свойство на элементах DOM
  • Изображение размытие
  • Ввод цвета

Переменные CSS

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

Например, мы можем определить в том месте, которое мы хотим, чтобы текст на нашем сайте был белый тогда мы можем определить это так

:root {
    --text-color: white;
}

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

.content {
    color: var(--text-color);
}

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

Примечание: Одна забавная идея, которую я имею с переменными CSS, заключается в том, что я могу определить цветовую палитру моего веб-сайта в одном месте, а затем предоставить пользователю ночной режим переключателя. Я могу изменить цвета по всему веб -сайту, изменив их только в одном месте.

Чтобы изменить их значение через JS, простой вызов метода делает трюк.

.style.setProperty('--text-color', 'red');

Приведенный выше фрагмент изменит значение, связанное с -text-Color в любой точке DOM-Element и любой из DOM-Element .

Свойство набора данных в элементах DOM

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

Здесь мы определили 2 атрибута данных, а именно Размер данных и ДАННЫЕ МАГАЗИНА Анкет

Теперь, когда нам нужно использовать их в JS, мы можем просто сделать

console.log(inputElement.dataset.sizing); // Used to access the data-sizing attribute.
console.log(inputElement.dataset.purpose); // Used to access the data-purpose attribute.

Набор данных очень простое свойство на элементах DOM, которое перечисляет все данные Атрибуты определены на этом элементе.

Изображение размытие

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

img {
    filter: blur(5px);
}

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

Ввод цвета

Стандартизация HTML и CSS позволила легко создать простой и функциональный цвет цветов. Единственное, что нужно сделать, это

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

Вывод

Это все люди, это было на сегодня. Если у вас есть что -то неясное в этой статье или вы хотите обсудить что -либо еще, поразите меня в Twitter @varun_barad Анкет

Оригинал: “https://dev.to/varunbarad/javascript-30-css-variables-44c5”

Читайте ещё по теме: