Чтение inline-стилей

Umbrella JS предоставляет удобный, лаконичный API для работы с DOM, включая управление inline-стилями элементов. Inline-стили — это CSS-свойства, заданные непосредственно на HTML-элементе через атрибут style. Управление ими с помощью Umbrella JS позволяет динамически изменять внешний вид элементов без необходимости модифицировать внешние таблицы стилей.

Получение значения стиля

Метод css() позволяет получать текущие значения inline-стилей элемента. Если вызвать его с одним аргументом — именем свойства CSS, он вернёт значение именно этого свойства.

u('div.example').css('color'); // возвращает, например, 'red'

  • Особенности:

    • Возвращается значение, как оно записано в inline-стиле, а не вычисленное браузером.
    • Для множественных элементов в выборке метод возвращает значение первого элемента.
u('p').css('font-size'); // значение font-size первого <p> в выборке

Установка одного свойства

Чтобы задать или изменить стиль элемента, css() принимает два аргумента: имя свойства и его значение.

u('div.box').css('background-color', 'blue');
  • Примечание: Umbrella JS автоматически добавляет корректные единицы, если они необходимы для свойства, но рекомендуется явно указывать их для точности ('20px', '1.5em').

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

css() может принимать объект с парами «свойство: значение» для массового изменения стилей.

u('.card').css({
    'border': '1px solid black',
    'padding': '10px',
    'margin-bottom': '15px'
});
  • Поддерживаются как CSS-свойства в kebab-case (margin-bottom), так и в camelCase (marginBottom). Umbrella JS корректно преобразует их при установке inline-стиля.

Удаление стиля

Удаление inline-стиля производится передачей null в качестве значения свойства.

u('.box').css('background-color', null);
  • Это полностью очищает указанное свойство на выбранных элементах.

Получение и установка нескольких свойств

Метод css() без аргументов возвращает объект всех inline-стилей выбранного элемента.

const styles = u('#header').css();
console.log(styles);
// { color: 'black', fontSize: '16px', margin: '0px' }
  • Объект содержит только те свойства, которые явно заданы в inline-атрибуте style.
  • Этот подход полезен для клонирования стилей или динамического изменения нескольких параметров.

Особенности работы с единицами

При работе с numeric свойствами (ширина, высота, отступы) важно указывать единицы:

u('.image').css('width', '200px');
u('.image').css('height', '150px');
  • Без единиц некоторые свойства могут не примениться корректно, особенно в старых браузерах.

Применение стилей к множеству элементов

Umbrella JS обрабатывает всю выборку элементов сразу. Это удобно для унифицированного изменения внешнего вида.

u('li').css('color', 'green');
  • Каждому <li> в текущем наборе будет установлен зелёный цвет текста.
  • При использовании объекта с несколькими свойствами можно применять комплексное оформление всей группы элементов одновременно.

Динамическое управление стилями

Inline-стили удобны для динамического управления анимациями или интерактивными эффектами:

u('.panel').css('opacity', '0.5');
u('.panel').css({
    'transform': 'translateY(10px)',
    'transition': 'all 0.3s ease'
});
  • Можно легко комбинировать с событиями для создания плавных визуальных эффектов.
  • Установка стилей через inline особенно полезна, когда изменения должны применяться моментально, без перезагрузки стилей CSS.

Работа с пользовательскими CSS-переменными

Umbrella JS поддерживает установку кастомных CSS-переменных через метод css().

u(':root').css('--main-color', '#3498db');
  • Это позволяет гибко управлять темами или динамическими стилями, используя inline-переменные вместо редактирования внешних таблиц стилей.

Итоговые рекомендации по inline-стилям

  • Для одиночных изменений достаточно передавать имя свойства и значение.
  • Для массовых изменений использовать объект с несколькими свойствами.
  • Для очистки стиля передавать null.
  • При работе с числами всегда указывать единицы, если они требуются CSS.
  • Inline-стили лучше использовать для динамических изменений, временных эффектов или быстрого прототипирования.

Умелое использование метода css() Umbrella JS позволяет контролировать стили напрямую на элементах, минимизируя необходимость ручной работы с element.style и упрощая создание динамических интерфейсов.

Оглавление