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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
解读ES6中class关键字
Nov 20 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 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实现事件机制实例分析
2015/06/26 PHP
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JS全角与半角转化实例(分享)
2017/07/04 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
用Python写一个自动木马程序
2019/09/17 Python
python 经典数字滤波实例
2019/12/16 Python
Python常用编译器原理及特点解析
2020/03/23 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
简单英文演讲稿
2014/01/01 职场文书
环境建设实施方案
2014/03/14 职场文书
森林病虫害防治方案
2014/06/02 职场文书
保护动物的标语
2014/06/11 职场文书
人事代理委托书
2014/09/27 职场文书
欠条样本
2015/07/03 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python