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 相关文章推荐
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python的pycurl包用法简介
2015/11/13 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python2与Python3的区别详解
2020/02/09 Python
python怎么提高计算速度
2020/06/11 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
总经理办公室主任岗位职责
2013/11/12 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书