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模块模式分析
May 16 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
JavaScript实现通讯录功能
Dec 27 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
python异常和文件处理机制详解
2016/07/19 Python
Python异常处理例题整理
2019/07/07 Python
Python标准库itertools的使用方法
2020/01/17 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
python如何写出表白程序
2020/06/01 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
python playwrigh框架入门安装使用
2022/07/23 Python