BlogGitHub

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;
})

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

LogoМанипуляции над CSS свойствамиanton.shevchuk.name
Previous20% Атрибуты и свойства элементовNextCSS классы

Last updated