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操作cookie_获取与修改代码
May 21 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
webpack实用小功能介绍
Jan 02 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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 采集获取指定网址的内容
2010/01/05 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
javascript新手语法小结
2008/06/15 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python绘制简单折线图代码示例
2017/12/19 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
物流专业自荐信
2014/05/23 职场文书
文明好少年事迹材料
2014/08/19 职场文书
环保守法证明
2015/06/24 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技