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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
laypage分页控件使用实例详解
May 19 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
js实现小星星游戏
Mar 23 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
使用php4加速网络传输
2006/10/09 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
网页javascript精华代码集
2007/01/24 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python验证码识别的示例代码
2017/09/21 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
好军嫂事迹材料
2014/01/15 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
项目建议书格式
2014/03/12 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
文艺演出策划方案
2014/06/07 职场文书
硕士学位论文评语
2014/12/31 职场文书
农村党员干部承诺书
2015/05/04 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL