在网页设计中,我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!”

1. addClass() - 添加CSS类

$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。

$("#target").toggleClass("newClass")
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类”newClass“将被赋给该ID。

在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。

如何添加/移除CSS类的更多相关文章

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

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

  2. JQ添加移除css样式

    1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...

  3. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  4. js动态给当前点击元素添加css类

    1.页面:

  5. js活jQuery实现动态添加、移除css/js文件

    下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

  6. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  7. JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  8. Jquery添加移除样式

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...

  9. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

随机推荐

  1. angular项目线上地址跳转或刷新报错的解决

    引用地址:https://blog.csdn.net/qq_35415307/article/details/80707463 本地ng项目没问题,到了线上跳转刷新都会报404错误,相信这个问题每个做 ...

  2. JS开发中的一些小技巧和方法

    生成指定范围内的随机数 当我们需要获取指定范围(min,max)内的整数的时候,下面的代码非常适合:这段代码用的还挺多的. function setRadomNum(min,max){ return ...

  3. C#使用NPOI读取电子表格Excel到DataGridView中

    上篇博文中已经介绍了如何写入Excel文件.这篇再介绍一下 如何从Excel中读取数据并保存到DataGridView中. 从Excel中读取数据并保存至DataGridView中,Excel文件第一 ...

  4. 问题:MSChart.exe;结果:微软图表控件MsChart使用方法及各种插件下载地址

    微软图表控件MsChart使用方法及各种插件下载地址 (2012-08-10 17:32:33) 转载▼ 标签: 图表 控件 下载地址 kernel32 微软 it 分类: C# 昨天在网上看到了微软 ...

  5. Linux TCP通信例子

    TCP通信的C/S模型 ///server.c #include <sys/types.h> #include <sys/socket.h> #include <stdi ...

  6. Assembly.GetManifestResourceNames()获取不到资源文件

    Assembly.GetManifestResourceNames()获取到的是嵌入的资源文件 右键资源文件属性 将生成操作改为嵌入的资源就OK咯

  7. 服务器环境迁移,Linux centos7 64位 基础环境部署 jdk+tomcat+mysql+nginx

    最近阿里云服务器到期,这个周末连夜将服务器迁移到美国去了,为什么迁移到美国去呢?主要是因为阿里云服务器费用高,另外网站的访问量不大,对网速要求也不高,主要是宣传和信息传递的作用,加上本人之前在***上 ...

  8. 使用Cors后台设置WebAPI接口跨域访问

    昨天根据项目组前端开发工程师反映,在浏览器端无法直接使用ajax访问后台接口获取数据,根据他的反映,我查阅了相关跨域的解决方案: 一:使用jsonP,但是jsonP只能使用GET请求,完全不符合我项目 ...

  9. Flask 入门(第一篇)

    1. 认识 Flask Flask 是一个微型 Web 框架,依赖于 jinjia2 模板系统和 Werkzeug WSGI(本质为 Socket 服务端) 服务,默认情况不支持数据库抽象层.表单验证 ...

  10. HTML 代码格式

     <code> 元素不保留多余的空格和折行: 如需解决该问题,您必须在 <pre> 元素中包围代码: