Работа с отдельными CSS-свойствами

Библиотека cash предоставляет компактный и удобный API для работы с DOM, ориентируясь на привычные методы jQuery, но с минимальным весом. Управление отдельными CSS-свойствами — одна из ключевых возможностей cash, позволяющая динамически изменять стиль элементов и получать текущие значения.

Получение CSS-свойства

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

const color = $('p').css('color');
console.log(color); // rgb(0, 0, 0) или другое значение цвета
  • Возвращается первое совпадающее значение для элементов в коллекции.
  • Имя свойства можно передавать в кебаб-кейсе (background-color) или в camelCase (backgroundColor).

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

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

$('p').css('color', 'red');
$('div').css('backgroundColor', '#f0f0f0');
  • Значение может быть строкой ('10px', 'bold') или числом (10), в случае числовых свойств, поддерживающих единицы по умолчанию, может добавляться px.

Установка нескольких CSS-свойств сразу

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

$('p').css({
  color: 'blue',
  fontSize: '18px',
  marginTop: '10px'
});
  • Такой подход удобен для группового применения стилей к элементам.
  • Свойства могут быть как в camelCase, так и в кебаб-кейсе.

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

Метод .css() возвращает вычисленные значения, аналогичные getComputedStyle в нативном JavaScript. Это означает:

  • Значения будут приведены к стандартной форме (px для размеров, rgb() для цветов).
  • Если свойство не определено явно, возвращается значение по умолчанию, установленное браузером.

Пример:

const width = $('#box').css('width'); // "200px"

Удаление CSS-свойства

Для удаления отдельного CSS-свойства используется установка значения в пустую строку:

$('p').css('color', '');
  • После этого стиль элемента будет унаследован или использовать значение по умолчанию.
  • Альтернативно, можно комбинировать с методами классов (.addClass(), .removeClass()) для более гибкого управления стилями.

Обработка числовых значений

Некоторые свойства, например width, height, margin, padding, допускают числовые значения без единиц. cash автоматически добавляет px:

$('#box').css('width', 300); // эквивалентно '300px'
  • Для свойств, где px не применимо, нужно явно указывать единицы (em, % и др.).

Доступ к нестандартным свойствам

Метод .css() позволяет работать и с CSS-переменными:

$('#box').css('--main-color', 'green');
const mainColor = $('#box').css('--main-color');
  • Значения возвращаются точно так, как установлены.
  • Поддерживается как установка, так и чтение переменных для динамического стайлинга.

События и динамическое изменение стилей

cash позволяет комбинировать управление стилями с событиями:

$('#button').on('click', function() {
  $(this).css('backgroundColor', 'yellow');
});
  • Это упрощает создание интерактивного интерфейса.
  • Изменение стилей может происходить на лету, без необходимости использовать отдельные классы.

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

  • Для производительности стоит избегать многократного вызова .css() для одного и того же элемента, лучше задавать объектом.
  • Использование CSS-переменных совместно с .css() повышает гибкость и позволяет централизованно управлять стилями.
  • Чтение свойства через .css() возвращает актуальное вычисленное значение, что полезно для анимаций или динамических расчетов.

Метод .css() в cash сочетает лаконичность и гибкость, позволяя управлять стилями на уровне отдельных свойств, а также работать с группами свойств одновременно. Его поведение предсказуемо и совместимо с современными браузерами, что делает библиотеку удобным инструментом для тонкой настройки внешнего вида элементов DOM.

Оглавление