jQuery - 获取并设置 CSS 类

2017-09-16
摘抄自W3school-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() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:

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

您也可以在 addClass() 方法中规定多个类:

$("button").click(function(){
  $("#div1").addClass("important blue");
});
jQuery removeClass() 方法

下面的例子演示如何不同的元素中删除指定的 class 属性:

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

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,494评论 0 44
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,111评论 0 8
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 676评论 0 3
  • jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途...
    阿r阿r阅读 674评论 0 6
  • 我有一个很怂的朋友,他的名字叫做大胆。每次我们笑话他的时候,他都解释说名字里面的“胆”字,夺走了他身体里的胆气。得...
    颜悬哉阅读 408评论 0 2