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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python使用turtle库绘制树
2018/06/25 Python
解析Python的缩进规则的使用
2019/01/16 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
会计学毕业生求职信
2014/06/25 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
500字小学生检讨书
2015/02/19 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技