Метод .css()

Метод .css() предназначен для работы со стилями элементов HTML. Он позволяет получать, задавать и изменять CSS-свойства как для одного, так и для множества элементов одновременно. Этот метод является одним из основных инструментов jQuery для динамического управления внешним видом страницы.

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

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

$(селектор).css(свойство);
  • селектор — строка, указывающая на элемент или группу элементов.
  • свойство — название CSS-свойства в виде строки.

Пример:

let backgroundColor = $('#box').css('background-color');
console.log(backgroundColor); // rgb(255, 255, 255)

Важно: при получении значения метода .css() возвращается вычисленное значение, даже если свойство задано в относительных единицах (em, %), оно будет преобразовано в пиксели (px), если это применимо.

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

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

$(селектор).css(свойство, значение);

Пример:

$('#box').css('color', 'red');
$('#box').css('width', '200px');

Метод автоматически применяет стиль ко всем выбранным элементам. Если элемент содержит уже существующее значение свойства, оно будет перезаписано.

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

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

$(селектор).css({
    'color': 'white',
    'background-color': 'blue',
    'font-size': '16px'
});

Преимущество этого подхода — чистый и компактный код при необходимости изменения множества стилей сразу.

Динамическое вычисление значений

Метод .css() поддерживает передачу функции вместо значения. Функция вызывается для каждого элемента и может вычислять новое значение на основе текущего:

$('#box').css('width', function(index, currentValue) {
    return parseInt(currentValue) + 20 + 'px';
});
  • index — индекс элемента в выборке.
  • currentValue — текущее значение CSS-свойства.

Это позволяет создавать адаптивные эффекты, например, увеличивать ширину блоков по определённой формуле.

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

Для CSS-свойств, которые требуют единицы измерения (px, %, em), jQuery автоматически добавляет 'px', если передан просто числовой тип:

$('#box').css('height', 100); // эквивалентно '100px'

Для свойств без единиц (opacity, z-index) передача числа используется напрямую.

Чтение и изменение нескольких элементов

Метод .css() применим к группе элементов, выбранных селектором. Применение изменения будет массовым:

$('.item').css('border', '1px solid black');

При чтении значения метода .css() из выборки с несколькими элементами возвращается значение первого элемента:

let fontSize = $('.item').css('font-size'); // значение font-size первого элемента

Особенности работы с !important

Стандартный метод .css() не может напрямую устанавливать CSS-свойства с !important. Для таких случаев необходимо использовать инлайновый стиль через DOM:

$('#box')[0].style.setProperty('color', 'red', 'important');

Влияние наследования и вычисленных стилей

Метод .css() возвращает вычисленное значение, учитывая все правила CSS и наследование. Например, если цвет текста не задан явно, а наследуется от родителя, .css('color') вернёт наследуемое значение.

Работа с пользовательскими свойствами CSS

Метод .css() поддерживает работу с CSS-переменными (Custom Properties):

let primaryColor = $('#box').css('--primary-color');
$('#box').css('--primary-color', 'green');

Сравнение с прямым доступом через style

Разница между jQuery .css() и доступом через element.style:

  • .css() возвращает вычисленное значение, даже если оно задано в классах CSS.
  • element.style отражает только инлайновые стили, заданные через атрибут style.

Пример:

console.log(document.getElementById('box').style.width); // '' если width задан через CSS
console.log($('#box').css('width')); // '200px' вычисленное значение

Использование в анимациях

Метод .css() часто используется совместно с анимациями jQuery для установки начальных или промежуточных стилей:

$('#box').css('opacity', 0).animate({ opacity: 1 }, 1000);

Также поддерживаются свойства типа height, width, margin, padding, что делает метод универсальным для динамического управления стилями.

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

Оглавление