Метод .css() позволяет получать и изменять CSS стили элемента.

См. также урок основы работы с jQuery для более полного понимания.

Синтаксис

Одно свойство:

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

Несколько свойств:

$(селектор).css({fontSize:'12px', color: 'red'})

Несколько свойств, альтернативный способ:

$(селектор).css({'font-size':'12px', color: 'red'})

Дополнительно

Начиная с jQuery1.4 метод css может применить заданную функцию к каждому элементу в наборе.

При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущий значение заданного css свойства для конкретного элемента:

$(селектор).css(имя свойства, function(номер в наборе, текущее значение css свойства))

Имена переменных в функции могут быть любыми.

К примеру, если для первого параметра 'номер в наборе' мы дадим имя index - тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.

Аналогично, если для второго параметра 'текущее значение css свойства' дать, к примеру, имя value - тогда внутри нашей функции будет доступна переменная value, в которой будет лежать текущее значение css свойства того элемента, который функция обрабатывает в данный момент времени:

$(селектор).css(function(index, value){
	//тут доступны переменные index и value
})

CSS свойство каждого элемента поменяется на то, которое вернет функция конкретно для этого элемента.

Примеры

Пример

Давайте получим все элементы с классом www и поменяем их цвет на красный:

<p class="www">Текст абзаца.</p>
$('.www').css('color', 'red');

Пример

Давайте получим все элементы с классом www и поменяем их цвет на красный, а размер шрифта - на 20px:

<p class="www">Текст абзаца.</p>
$('.www').css({color:'red', fontSize:'20px'});

Или, альтернативный вариант:

<p class="www">Текст абзаца.</p>
$('.www').css({'color':'red', 'font-size':'20px'});