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-свойства.
|
Пример 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" });