jQuery添加/改变/移除CSS类及判断是否已经存在CSS


Posted in Javascript onAugust 20, 2014

改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:“jQuery让JavaScript代码变得简洁!”,言归正传,来看jquery如何添加、移除CSS类:

1. removeClass() - 移除CSS类

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

2.addClass() - 添加CSS类

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

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

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

4.hasClass("className") - 判断是否已经存在CSS

在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。

Javascript 相关文章推荐
JS 实现导航栏悬停效果
Sep 23 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
关于使用js算总价的问题
Jun 23 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue动态绑定style样式
Apr 20 Vue.js
jQuery CSS()方法改变现有的CSS样式
Aug 20 #Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
js中使用replace方法完成某个字符的转换
Aug 20 #Javascript
js 动态修改css文件用到了cssRule
Aug 20 #Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 #Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 #Javascript
You might like
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
js计算页面刷新的次数
2009/07/20 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Django框架 querySet功能解析
2019/09/04 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
通俗讲解python 装饰器
2020/09/07 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
婚礼主持词开场白
2014/03/13 职场文书
学术会议主持词
2014/03/17 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
学习考察心得体会
2014/09/04 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
暑期家教宣传单
2015/07/14 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
vue前端工程的搭建
2021/03/31 Vue.js