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 on方法传递参数示例
Dec 09 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
基于JavaScript实现随机点名器
Feb 25 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
nohup的用法
2014/08/10 面试题
自荐书模板
2013/12/15 职场文书
反腐倡廉标语
2014/06/24 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
公司宣传语大全
2015/07/13 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python