jQuery операция с CSS - метод css()

Пример

Установить цвет элемента <p>:

$(".btn1").click(function(){
  $("p").css("color","red");
});

Попробуйте сами

Определение и использование

Метод css() возвращает или устанавливает один или несколько стилистических свойств соответствующего элемента.

Возвращает значение свойства CSS

Возвращает значение свойства CSS первого соответствующего элемента.

Комментарий:При возврате значения не поддерживаются сокращенные свойства CSS (например, "background" и "border").

$(selector).css(name)
Параметры Описание
name Обязателен. Определяет имя свойства CSS. Параметр может содержать любое свойство CSS. Например, "color".

Пример

Получить значение свойства color стиля первого абзаца:

$("p").css("color");

Попробуйте сами

Установить свойства CSS

Установить указанное CSS-свойство для всех соответствующих элементов.

$(selector).css(name,value)
Параметры Описание
name Обязателен. Определяет имя CSS-свойства. Этот параметр может содержать любое CSS-свойство, например "color".
value

Опционален. Определяет значение CSS-свойства. Этот параметр может содержать любое значение CSS-свойства, например "red".

Если установлено значение пустой строки, то свойство удаляется из элемента.

Пример

Установить цвет всех абзацев в красный:

$("p").css("color","red");

Попробуйте сами

Использование функции для установки CSS-свойства

Установить значение свойства стиля для всех соответствующих элементов.

Эта функция возвращает значение свойства, которое нужно установить. Принимает два параметра, index - это индекс элемента в集合е объектов, value - это прежнее значение свойства.

$(selector).css(name,function(index,value))
Параметры Описание
name Обязателен. Определяет имя CSS-свойства. Этот параметр может содержать любое CSS-свойство, например "color".
function(index,value)

Определяет функцию, которая возвращает новое значение CSS-свойства.

  • index - опционален. Принимает индекс位置的 селектора
  • oldvalue - опционален. Принимает текущее значение CSS-свойства.

Пример 1

Установить цвет всех абзацев в красный:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

Попробуйте сами

Пример 2

Постепенно увеличивать ширину div:

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

Попробуйте сами

Установить несколько пар свойств CSS/значений

$(selector).css({property:value, property:value, ...})

Установите объект "имя/значение" для свойств стиля всех соответствующих элементов.

Это лучший способ установить множество свойств стиля на всех соответствующих элементах.

Параметры Описание
{property:value}

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

Этот параметр может содержать несколько пар имен свойств CSS/значений. Например {"color":"red","font-weight":"bold"}

Пример

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Попробуйте сами