Изменение стилей CSS

Получение стиля

Для работы со стилями применяется метод css(). Чтобы получить значение нужного свойства, мы передаем в этот метод в качестве параметра название свойства:

console.log($('body').css('font-size'));

Изменение стиля

Чтобы изменить стиль, во-первых, мы можем передать в метод css в качестве второго параметра новое значение свойства:

$('a').css('font-weight', 'bold');

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

$('a').css('color', function(index, oldValue){
		if(oldValue=='rgb(0, 0, 238)')
		{return 'red';}
		else
		{return 'green';}
	});

В зависимости от того, какое было старое значение oldValue элемента для данного свойства, функция возвращает новое значение для каждого элемента выборки.

В-третьих, мы можем передать массив свойств для установки:

$('a').css({'color':'red', 'cursor':'pointer', 'font-size': '14px'});

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

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

$('a').css({'font-size': '-=1', 'margin-left': '+=10'});

Установка ширины и высоты

Несмотря на то, что мы можем манипулировать свойствами width и height через метод css, мы можем также использовать одноименные методы width() и height():

var div = $('div').first();
var newWidth=div.width()+150;
div.width(newWidth);
var newHeight = div.height()+50;
div.height(newHeight);