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 相关文章推荐
JS中 用户登录系统的解决办法
Apr 15 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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 mssql 时间格式问题
2009/01/13 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python3之微信文章爬虫实例讲解
2017/07/12 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python绘制规则网络图形实例
2019/12/09 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
应届生求职信写作技巧
2013/10/24 职场文书
经理秘书岗位职责
2013/11/14 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
工程质量月活动方案
2014/02/19 职场文书
平安工地汇报材料
2014/08/19 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
教师节随笔
2015/08/15 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL