CSS стили

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

Копать начнём с более досконального изучения метода .css():

css(property)	получение значения CSS-свойства
css(property, value)	установка значения CSS-свойства
css({ property1: value, property2: value })	установка нескольких значений
css(property, function(index, value) { return value } )	тут для установки значения используется функция обратного вызова (в просторечии — callback-функция), index это порядковый номер элемента в выборке, value — текущее значение свойства

Метод css() возвращает текущее значение, а не прописанное в CSS-файле по указанному селектору.

Приведу примеры использования:

// устанавливаем значение цвета шрифта
$("#my").css("color", "red")

// меняем цвет фона
$("#my").css("background-color", "yellow")

Для изменения нескольких параметров передаём объект в формате ключ-значение (это фактически JSON):

$("#my").css({
    "color": "red",
    "font-size": "18px",
    "background-color": "white"
})

Для именования свойств можно использовать как CSS-нотацию (см. пример выше), так и JavaScript вариант:

$("#my").css({
    color: "black",
    fontSize: "12px",
    backgroundColor: "transparent"
})

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

$("#my").css("font-size", function(i, value){
    return parseFloat(value) * 1.5;
})

Наглядный интерактивный пример:

Пример манипуляций над CSS