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为textarea添加maxlength属性的代码
Apr 07 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
js实现随机点名小功能
Aug 17 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 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
PHP语法速查表
2006/12/06 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
php Static关键字实用方法
2010/06/04 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP打印输出函数汇总
2016/08/28 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
JS作用域深度解析
2016/12/29 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
21岁生日感言
2014/02/27 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
内勤主管岗位职责
2014/04/03 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
荒岛余生观后感
2015/06/09 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL