返回宝典

jQuery CSS类

上一节 下一节

jQuery老仙,神功盖世,可以轻松快捷地操作处理元素的CSS样式。

jQuery 操作CSS

jQuery操作CSS可用到如下4中常用的方法:

  • addClass() - 给指定元素添加一种或多种CSS样式运行一下
  • removeClass() - 移除指定元素一种或多种CSS样式运行一下
  • toggleClass() - 切换于添加或删除指定元素的CSS样式运行一下
  • css() - 获取或设置元素指定的CSS样式属性运行一下

示例的样式表

如下所示的样式表例子,会在下面所有的例子中用到:

.fan-qing-fu-ming {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: #46acb6; /* 一种蓝色 */
}

addClass() 方法

把指定的Class类名添加给jQuery选择器指定的元素。(注意!下面的blue不是颜色名,而是Class类名)

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("fan-qing-fu-ming");
});

运行一下


也可以添加复合的Class类名,如下所示:

$("button").click(function(){
    $("#div").addClass("fan-qing-fu-ming blue");
});

运行一下

removeClass() 方法

如下所示,jQuery中的removeClass()方法可以移除指定元素一种或多种CSS样式。

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

运行一下

toggleClass() 方法

如下所示,jQuery中的toggleClass()方法可以切换于添加或删除指定元素的CSS样式。

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

运行一下

css() 方法

欲知css()方法,请听下回分解。下一小节说的就是css()方法。


jQuery CSS类

上一节 下一节