Вычисляемые стили

Umbrella JS предоставляет удобный и компактный API для работы с DOM, в том числе для получения и изменения стилей элементов. Одной из ключевых возможностей является работа с вычисляемыми стилями (computed styles) — значениями CSS-свойств, которые реально применяются к элементу после всех правил CSS, наследования и каскадов.

Получение вычисляемых стилей

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

u('#myElement').css('color'); // возвращает реальный цвет текста
u('#myElement').css('width'); // возвращает ширину элемента, включая пиксели

Если нужно получить сразу несколько свойств, можно передать массив:

u('#myElement').css(['width', 'height', 'margin']);

Результатом будет объект вида:

{
  width: "200px",
  height: "100px",
  margin: "10px"
}

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

Метод css() также используется для установки стилей. Он принимает объект, где ключ — это имя CSS-свойства, а значение — нужное значение.

u('#myElement').css({
  color: 'red',
  backgroundColor: '#f0f0f0',
  width: '300px'
});

Для одиночного свойства можно использовать короткую форму:

u('#myElement').css('fontSize', '16px');

Umbrella JS автоматически конвертирует имена свойств из camelCase в kebab-case для работы с CSS.

Работа с числовыми значениями и единицами

При установке размеров (ширина, высота, отступы) можно использовать числовые значения, к которым автоматически добавляются пиксели:

u('#box').css({
  width: 200,    // 200px
  height: 150    // 150px
});

Для свойств, где пиксели не применимы, нужно указывать единицы явно:

u('#box').css('opacity', 0.5);
u('#box').css('zIndex', 10);

Чтение и вычисление сложных стилей

Umbrella JS позволяет получать вычисленные значения даже для сложных CSS-свойств, таких как margin, padding, border:

const styles = u('#container').css(['marginTop', 'marginBottom']);
console.log(styles.marginTop); // "20px"
console.log(styles.marginBottom); // "15px"

Если элемент скрыт через display: none, метод css() вернет значения, которые браузер вычисляет для текущего состояния, но не для скрытого рендеринга. Для корректного получения размеров скрытых элементов используют временное изменение видимости.

Анимации и динамические изменения стилей

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

const box = u('#box');
const currentWidth = parseInt(box.css('width'), 10);

box.css({
  width: (currentWidth + 50) + 'px'
});

Здесь parseInt извлекает числовое значение из строки вида "200px", что позволяет безопасно выполнять арифметику со стилями.

Особенности наследования и каскада

Метод css() возвращает окончательные вычисленные значения, учитывающие:

  • CSS-файлы, подключенные к странице;
  • inline-стили;
  • наследование свойств от родительских элементов;
  • специфичность и каскад CSS.

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

Ограничения

  • Для псевдоэлементов (::before, ::after) стандартный метод css() не работает, так как они не являются полноценными DOM-узлами. Для их стилей нужно использовать window.getComputedStyle.
  • Не все свойства возвращаются с одинаковым форматом (например, opacity возвращается как число, а width — как строка с единицами).
  • При работе с анимациями и transition важно учитывать, что изменения через css() мгновенные, а не плавные по умолчанию.

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

Изменение цвета всех параграфов на странице:

u('p').css('color', '#333');

Установка одинаковых отступов для группы элементов:

u('.card').css({
  padding: '10px',
  marginBottom: '20px'
});

Динамическая адаптация ширины элемента:

const container = u('#container');
const containerWidth = parseInt(container.css('width'), 10);
u('#sidebar').css('width', (containerWidth * 0.3) + 'px');

Эти возможности делают Umbrella JS удобным инструментом для манипуляции стилями, как статическими, так и динамическими, с минимальным количеством кода и высокой читаемостью.

Оглавление