Установка inline-стилей

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

Основной метод css

Для установки стилей в Umbrella JS используется метод css. Он поддерживает как установку одного свойства, так и нескольких одновременно.

Синтаксис установки одного свойства:

u('selector').css('property', 'value');

Пример:

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

В этом случае элемент с идентификатором box получает красный фон. Свойство property передаётся в каме́ль-кейсе, а не через дефис, то есть backgroundColor вместо background-color:

u('#box').css('backgroundColor', 'red');

Оба варианта поддерживаются, но camelCase рекомендуется для единообразия с JavaScript-стандартом.

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

Метод css также поддерживает передачу объекта с парами «свойство-значение», что удобно для одновременной установки нескольких стилей:

u('#box').css({
    width: '200px',
    height: '100px',
    border: '2px solid black',
    backgroundColor: 'yellow'
});

При таком подходе каждый стиль применяется моментально, и код остаётся компактным.

Чтение текущего значения стиля

Метод css можно использовать не только для установки, но и для получения текущего значения:

let bgColor = u('#box').css('backgroundColor');
console.log(bgColor); // Например: "rgb(255, 255, 0)"

Если передать только имя свойства, метод возвращает строку с текущим computed-style элемента.

Цепочки методов и множественные элементы

Umbrella JS поддерживает работу с коллекцией элементов. При применении метода css к множеству элементов все они будут изменены одновременно:

u('.item').css({
    margin: '10px',
    padding: '5px'
});

Методы библиотеки возвращают объект Umbrella, что позволяет строить цепочки вызовов:

u('.item')
    .css({ color: 'white', backgroundColor: 'blue' })
    .attr('data-active', 'true')
    .addClass('highlighted');

Использование с динамическими значениями

В качестве значения свойства можно использовать функцию, которая получает индекс элемента и его текущее значение:

u('.item').css('fontSize', function(index, current) {
    return (parseInt(current) || 12) + index * 2 + 'px';
});

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

Совместимость со всеми CSS-свойствами

Метод css работает с любыми стилями, включая свойства трансформации, переходов и анимаций:

u('#box').css({
    transform: 'rotate(45deg)',
    transition: 'all 0.3s ease-in-out'
});

Это позволяет полностью управлять визуальной частью элементов без необходимости вмешательства в отдельные CSS-файлы.

Важные нюансы

  • Префиксные свойства. Umbrella JS не добавляет автоматически вендорные префиксы, поэтому для старых браузеров их нужно указывать вручную.
  • Приоритет. Inline-стили имеют высокий приоритет над CSS-файлами, что обеспечивает мгновенный эффект, но может мешать переопределению классов.
  • Единицы измерения. При установке размеров и расстояний обязательно указывать единицы (px, %, em), иначе свойство может быть проигнорировано.

Примеры практического применения

  1. Динамическая подсветка элементов при наведении:
u('.menu-item').on('mouseenter', function() {
    u(this).css('backgroundColor', 'lightblue');
}).on('mouseleave', function() {
    u(this).css('backgroundColor', '');
});
  1. Анимация изменения ширины блока:
u('#progress').css('width', '0px');

let width = 0;
let interval = setInterval(function() {
    if (width >= 100) {
        clearInterval(interval);
    } else {
        width += 5;
        u('#progress').css('width', width + 'px');
    }
}, 100);
  1. Смена темы страницы:
u('body').css({
    backgroundColor: '#222',
    color: '#eee',
    fontFamily: 'Arial, sans-serif'
});

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

Оглавление