Skip to main content

jQuery CSS 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性​

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例

$("p").css("background-color")

设置 CSS 属性​

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

实例

$("p").css("background-color","yellow");

设置多个 CSS 属性​

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

笔记​

笔记一​

文章的第一段代码中，只获取到了第一个 p 标签的 background-color，那么怎么才能获取到第二或第三个 p 的背景颜色呢，加入选择器 :nth-child()：

实例

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>
$("button").click(function(){
    alert("p1背景颜色 = " + $("p:nth-child(2)").css("background-color"));
    alert("p2背景颜色 = " + $("p:nth-child(3)").css("background-color"));
    alert("p3背景颜色 = " + $("p:nth-child(4)").css("background-color"));
});

PS: 这里 :nth-child() 选择器默认以 body 作为父标签，所以 :nth-child(1) 是 <h2> </h2>。

笔记二​

上一篇笔记中用的 nth-child 太麻烦。

当页面的元素特别多，父子关系特别繁杂的时候，不可能一个个去数要的元素是 body 的第几个元素。

另一方面，页面可以动态的，body 下的索引容易变化，用这个方法指定某个元素非常不靠谱。

要选取第几个 p 的方法，正确的应该是这样：

$("p").eq(N) // N 是索引号，从 0 开始

笔记三​

1 楼和 2 楼都很麻烦啊

<div class="getColor">
  <p class="a">first</p>
  <p class="b">second</p>
  <p class="c">third</p>
</div>
<button class="color">弹窗返回颜色</button>

<script>
  $(function(){
     $(".color").click(function(){
       alert("b的背景颜色为：" + $(".getColor").children(".b").css("background-color"));
     }); 
   });
</script>

笔记四​

楼上都太麻烦了，使用一个循环不是全搞定

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
<script>
$(document).ready(function(){
    for(var i=0;i<3;i++){
        alert($('p').eq(i).css('background-color'));
    }
});
</script>
</body>

一步到位。

笔记五​

楼上的，还可以智能一点:

$(function() {
    $("button").click(function() {
       for(var i = 0; i < $("p").length; i++)
        {
            alert($("p").eq(i).css("background-color"));
        }
  });
});