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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
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
深入php之规范编程命名小结
2013/05/15 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
利用python实现数据分析
2017/01/11 Python
Python聊天室程序(基础版)
2018/04/01 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
django框架两个使用模板实例
2019/12/11 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
篮球比赛口号
2014/06/10 职场文书
学习教师法的心得体会
2014/09/03 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS