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 相关文章推荐
浅析js封装和作用域
Jul 09 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Highcharts入门之简介
Aug 02 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
js倒计时显示实例
Dec 11 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
JavaScript实现星级评价效果
May 17 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 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&&mysql)二
2006/10/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP类的特性实例分析
2016/09/28 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python print出共轭复数的方法详解
2019/06/25 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
机修车间主任岗位职责
2015/04/08 职场文书
工程款申请报告
2015/05/15 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL