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获得网页窗口实际大小的示例代码
Sep 21 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php printf输出格式使用说明
2010/12/05 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
php链式操作的实现方式分析
2019/08/12 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
外贸销售员求职的自我评价
2013/11/23 职场文书
服务质量承诺书
2014/03/27 职场文书
技术股份合作协议书
2014/10/05 职场文书
婚庆答谢词
2015/01/04 职场文书
内勤岗位职责
2015/02/10 职场文书
联欢会开场白
2015/06/01 职场文书
课程设计感想范文
2015/08/11 职场文书