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

Cash — это компактная и производительная библиотека, созданная как облегчённая альтернатива jQuery. Она предоставляет удобный API для работы с DOM, событиями, анимациями и стилями, сохраняя синтаксис, близкий к jQuery. Одной из ключевых возможностей является работа с вычисленными стилями элементов, что позволяет получать точные значения CSS, которые применены в момент выполнения к элементу, включая стили, унаследованные или заданные внешними стилями.

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

Для получения стиля элемента используется метод css(). Cash позволяет как устанавливать, так и получать значения стилей.

Синтаксис для чтения стилей

const value = $(selector).css(property);

selector — строка CSS-селектора или DOM-элемент.
property — имя CSS-свойства в формате camelCase (backgroundColor, fontSize) или в виде строки с дефисами ('background-color').

Пример:

const fontSize = $('#title').css('font-size');
console.log(fontSize); // "16px"

Метод возвращает значение в том виде, в котором оно вычислено браузером, включая единицы измерения.

Получение нескольких свойств одновременно

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

const styles = $('#title').css(['font-size', 'color', 'margin']);
console.log(styles);
/*
{
  "font-size": "16px",
  "color": "rgb(0, 0, 0)",
  "margin": "0px"
}
*/

Это особенно полезно, когда необходимо получить несколько связанных стилей и работать с ними как с объектом.

Работа с вычисленными стилями через `window.getComputedStyle`

Иногда необходимо получить точное вычисленное значение, даже если стиль задан через класс или унаследован. Cash позволяет напрямую использовать стандартный метод getComputedStyle:

const el = document.querySelector('#title');
const computedStyles = window.getComputedStyle(el);
console.log(computedStyles.width); // "200px"
console.log(computedStyles.marginTop); // "10px"

Метод getComputedStyle возвращает только чтение, поэтому изменить стиль через него нельзя. Для установки используется метод css() библиотеки Cash.

Особенности чтения стилей

Единицы измерения Cash возвращает значение с единицами (px, %, em и т. д.), как оно вычислено браузером. Если необходимо числовое значение, можно использовать parseFloat:
```
const width = parseFloat($('#box').css('width'));
```
Свойства, которые не были явно заданы Если стиль не установлен через inline или CSS, метод css() вернёт значение, которое применяет браузер по умолчанию:
```
console.log($('#box').css('display')); // "block"
```
Стили для нескольких элементов Если селектор соответствует набору элементов, css() вернёт значение только первого элемента. Для перебора всех элементов используют методы each или map:
```
$('.items').each(function(el) {
    console.log($(el).css('color'));
});
```

Сравнение с jQuery

Cash использует тот же синтаксис, что и jQuery для методов css() и each(), что облегчает миграцию.
Метод css() в Cash быстрее за счёт минималистичной архитектуры и меньшего объёма кода.
Cash поддерживает только основные функции, поэтому продвинутые методы jQuery, связанные с вычисленными стилями, могут отсутствовать.

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

Адаптивная верстка Получение ширины элемента для динамического изменения других элементов:
```
const containerWidth = $('#container').css('width');
$('#sidebar').css('width', containerWidth);
```
Проверка видимости элементов Для определения, скрыт элемент или нет, можно использовать свойство display:
```
if ($('#menu').css('display') === 'none') {
    console.log('Меню скрыто');
}
```
Анимации и динамическая стилизация Значения стилей можно считывать перед началом анимации, чтобы вычислить конечное состояние:
```
const startHeight = $('#panel').css('height');
$('#panel').css('height', parseInt(startHeight) + 50 + 'px');
```