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 相关文章推荐
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
提升PHP速度全攻略
2006/10/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php截取字符串函数分享
2015/02/02 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python map及filter函数使用方法解析
2020/08/06 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
七年级历史教学反思
2014/02/05 职场文书
十佳党员事迹材料
2014/08/28 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫