最新的Web开发教程
 

jQuery - 获取和设置CSS类


与jQuery,很容易操纵元件的CSS。



jQuery的CSS操纵

jQuery有对CSS处理的几种方法。 我们将看看下面的方法:

  • addClass() -添加一个或多个类选择的元素
  • removeClass() -删除从选定的元件中的一个或多个类
  • toggleClass() -从选定的元素添加/移除类之间切换
  • css() -设置或返回样式属性

示例样式表

下面的样式将被用于本网页上的所有的例子:

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

jQuery的addClass()方法

下面的例子说明如何类属性添加到不同的元素。 当然你也可以选择多个元素,添加类时:

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});
试一试»

您还可以在指定范围内多类addClass()方法:

$("button").click(function(){
    $("#div1").addClass("important blue");
});
试一试»

jQuery的removeClass()方法

下面的示例演示如何从不同的元素删除特定的类属性:

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});
试一试»

jQuery的toggleClass()方法

下面的例子将展示如何使用jQuery的toggleClass()方法。 这种方法添加/从选定内容删除类之间切换:

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
试一试»

jQuery的css()方法

jQuery的css()方法将在下一章解释。


自测练习用!

练习1» 练习2» 练习3» 练习4»


jQuery的CSS参考

对于所有的jQuery的CSS方法的完整概述,请访问我们的jQuery HTML / CSS参考