Метод jQuery css()

Методы HTML/CSS jQuery

Метод css() jQuery��取或 устанавливает один или несколько стилистических атрибутов выбранного элемента.

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

Используя метод css()установленопри установке значения атрибута, оно будетВсе выбранные элементыУстановите один или несколько пар атрибут/значение.

Таким же образом, jQuery одинаково интерпретирует CSS и формат DOM для многословных атрибутов. Например, jQuery понимает css("background-color") и css("backgroundColor") и возвращает правильное значение.

Однако, поддержка кратких сокращений CSS-атрибутов (например, "background", "margin" и "border") не полная, и в разных браузерах могут возникать различные результаты.

Грамматика:

Получите значение CSS-атрибута:

$.css(property)

Установите CSS-атрибуты и значения:

$.css(property, value)

Установите несколько CSS-атрибутов и значений:

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

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

$.css(selector, function(index, currentValue))

Пример

Нажмите, чтобы получить фоновый цвет DIV:

$("div").click(function() {
　　$(this).css("background-color");
});

Установите цвет всех абзацев:

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

Установите несколько CSS-атрибутов и значений:

$("button").click(function(){
　　$("p").css({
　　　　"color": "white",
　　　　"font-size": "1.3em",
　　　　"background-color": "#4285f4",
　　　　"padding": "20px"　　
　　});
});

Получите ширину, высоту, цвет и фоновый цвет нажатого DIV:

$("div").click(function() {
　　let html = ["Указанный div имеет следующие стили:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color"]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop + ": " + value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

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

$("button").click(function(){
　　$("p").css("padding", function(i, val){
　　　　return i + 25;
　　});
});

Нажмите на кнопку, чтобы увеличить отступ всех абзацев (используя функцию):

$("button").click(function(){
　　$("p").css({
　　　　padding: function(i, val){
　　　　　　return parseFloat(val) * 1.2;
　　　　}
　　});
});

Значение параметра

Методы HTML/CSS jQuery