Работа с несколькими стилями

Umbrella JS предоставляет лаконичный и удобный интерфейс для работы с элементами DOM, включая манипуляции со стилями. Возможность применять и управлять несколькими CSS-свойствами одновременно делает библиотеку особенно гибкой для динамического изменения внешнего вида элементов.

Установка и базовое использование

Подключение Umbrella JS осуществляется стандартным образом через CDN или локальный скрипт:

<script src="https://unpkg.com/umbrellajs"></script>

Для выборки элементов используется функция u(selector), которая возвращает коллекцию элементов. Она является основой всех операций с DOM в Umbrella JS, включая работу со стилями.

u('.box').css('background-color', 'red');

Установка нескольких стилей одновременно

Метод .css() позволяет передавать объект с ключами в виде CSS-свойств и значениями. Это позволяет одним вызовом задать сразу несколько стилей.

u('.box').css({
  'background-color': 'blue',
  'border-radius': '10px',
  'padding': '15px',
  'box-shadow': '0 4px 6px rgba(0,0,0,0.1)'
});

Важные моменты:

  • Ключи объекта должны соответствовать CSS-свойствам в формате camelCase или kebab-case. Umbrella JS автоматически корректно применяет оба варианта.
  • Значения указываются строкой или числом. Если используется число, библиотека автоматически добавляет единицы измерения для свойств, где это необходимо (например, px для width, height и padding).

Чтение нескольких стилей

Метод .css() также может использоваться для чтения стилей. При передаче массива ключей возвращается объект с текущими значениями.

const styles = u('.box').css(['background-color', 'border-radius', 'padding']);
console.log(styles);
// { 'background-color': 'blue', 'border-radius': '10px', 'padding': '15px' }

Это позволяет легко извлекать несколько значений без необходимости вызывать .css() по каждому свойству отдельно.

Динамическое изменение стилей на основе условий

Umbrella JS поддерживает передачу функции в метод .css(), что делает возможным динамическое вычисление значения свойства для каждого элемента коллекции.

u('.box').css({
  'opacity': function(index, currentValue) {
    return 1 - index * 0.2; 
  },
  'transform': function(index) {
    return `translateY(${index * 10}px)`;
  }
});

Функция получает два аргумента:

  1. index — порядковый номер элемента в выборке.
  2. currentValue — текущее значение свойства, что позволяет использовать его для вычислений.

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

Удаление нескольких стилей

Метод .css() позволяет удалять свойства, передавая значение null или массив с названиями свойств:

// Удаление конкретного свойства
u('.box').css('background-color', null);

// Удаление нескольких свойств
u('.box').css({
  'border-radius': null,
  'box-shadow': null
});

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

Работа с псевдоклассами и важными свойствами

Umbrella JS поддерживает добавление стилей с флагом !important через строку значения:

u('.box').css({
  'color': 'red !important',
  'font-size': '18px'
});

Это позволяет легко переопределять существующие стили, не создавая отдельные CSS-классы.

Применение стилей через классы и комбинированный подход

Иногда удобнее комбинировать работу с классами и прямое задание стилей:

u('.box')
  .addClass('highlight')
  .css({
    'border': '2px solid black',
    'padding': '20px'
  });

Такой метод позволяет создавать гибкую систему управления стилями: базовые визуальные свойства задаются через CSS-классы, а динамические изменения — через .css().

Практические рекомендации

  • Объединение нескольких стилей в объект значительно повышает читаемость кода и упрощает поддержку.
  • Использование функции для вычисления значений удобно при работе с коллекциями элементов.
  • Удаление стилей через null предотвращает накопление ненужных inline-стилей и упрощает адаптацию элементов под разные состояния.
  • Комбинирование классов и .css() позволяет разделять статические и динамические визуальные эффекты, сохраняя структуру проекта чистой.

Работа с несколькими стилями в Umbrella JS делает код компактным, управляемым и легко читаемым, особенно при динамическом создании интерфейсов и интерактивных элементов.

Оглавление