编辑这个页面须要登录或更高权限！

jQuery css() 方法

jQuery HTML/CSS 方法

css()方法获取或设置所选元素的一个或多个样式属性。

当使用css()方法获取属性值时，它将返回第一个选定元素的值。

使用css()方法设置属性值时，它将为所有选定元素设置一个或多个属性/值对。

同样，jQuery可以同等地解释多词属性的CSS和DOM格式。例如，jQuery可以理解css（“ background-color”）和css（“ backgroundColor”）并返回正确的值。

但是，不完全支持速记简写CSS属性（例如“background”，“margin”和“border”），并且在不同的浏览器中可能会产生不同的结果。

语法：

获取CSS属性值：

$(selector).css(property)

设置CSS属性和值：

$(selector).css(property, value)

设置多个CSS属性和值：

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

使用函数设置CSS属性和值

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

实例

单击获取DIV的背景色：

$("div").click(function(){
  $(this).css("background-color");
});
测试看看‹/›

设置所有段落的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;
    }
  });
});
测试看看‹/›

参数值

参数描述
property指定CSS属性的名称
value指定CSS属性的值
function(index, currentValue)指定一个函数，该函数返回CSS属性的值

  • index-返回元素在集合中的索引位置

  • currentValue-返回CSS属性的当前值

jQuery HTML/CSS 方法

jQuery 遍历方法jQuery HTML/CSS 方法