通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 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(){ $("body div:first").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");});

尝试一下 »


jQuery css() 方法

我们将在下一章讲解 jQuery css() 方法。

jquery addClass,removeClass 设置或删除类相关推荐

  1. jQuery - 获取并设置 CSS 类

    通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元 ...

  2. jQuery - 获取并设置 CSS 类、尺寸

    jQuery - 获取并设置 CSS 类 通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 拥有若干进行 CSS 操作的方法: addClass() - 向被选元素添加一个或多 ...

  3. jquery 判断控件css样式,jQuery获取并设置CSS类

    jQuery获取并设置CSS类 通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...

  4. jquery访问css类,jQuery - 获取并设置 CSS 类

    2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类 希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...

  5. jquery获取和设置属性_jQuery获取属性,设置属性,删除属性

    jquery获取和设置属性 Today we will look into following examples – jQuery get attribute, jQuery set attribut ...

  6. php+jq+添加css,jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  7. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  8. ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  9. jQuery addClass

    jQuery addClass function is used to add one or more specified classes to the matched DOM elements. j ...

  10. 前端cookie的设置获取删除

    前端cookie的设置获取删除 /* 我们有过这样的经历,当我们登录一个网站时候,网站会提示我们需不需要记住账号和密码一般来说,当我们登录一个网站时,后台会返回一个token字符串作为用户的登录标识, ...

最新文章

  1. linux:用户和组
  2. android摄像头预览功能,android通过camera和surfaceview选择摄像头并即时预览
  3. SFB 项目经验-55-另类更新Exchange 2016 KB
  4. mybatis控制台打印sql
  5. MediaWiki安装配置(Linux)【转】
  6. C# 委托 / 跨线程访问UI / 线程间操作无效: 从不是创建控件“Form1”的线程访问它...
  7. Linux---文件、软链接于硬链接文件
  8. 你根本不需要去追求“完美”的软件!
  9. Could not find resource——mybatis 找不到映射器xml文件
  10. python程序按钮怎么创建_如何使用pygame创建按钮?
  11. caffe中的 AlexNet,LeNet,CaffeNet
  12. Java 7:最新特性更新、代码示例及性能测试
  13. html博客网页代码_Python自动化运维系列:Django搭建个人博客之前端篇
  14. [C#] TestHttpPost:测试Http的POST方法的小工具
  15. 斗鱼服务器维护不能改名,斗鱼tv怎么改名字-斗鱼tv修改昵称的方法 - 河东软件园...
  16. 【IOI 2018】Combo 组合动作(模拟,小技巧)
  17. commander.js使用及源码分析
  18. VS2019安装和使用(C语言)
  19. “硬脱欧”或引发边界混乱 欧盟呼吁做最坏打算
  20. 怎么看待员工上班迟到扣工资行为?程序员:加班补工资就行

热门文章

  1. java B2B2C 多租户电子商城系统-SpringCloud动态刷新配置信息
  2. 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader
  3. 聊聊reactive streams的schedulers 1
  4. BYOD时代无线安全成企业关注焦点
  5. AngularJs 隔离作用域
  6. 压力测试的轻量级具体做法
  7. ASP.NET AJAX应用
  8. windows/Linux/Mac下安装maven
  9. 如何将开源项目部分代码作为private放在github上?
  10. IT群侠传第一回内外兼修