jQuery 添加/移除CSS类实现代码


Posted in Javascript onFebruary 11, 2010

其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!”

1. addClass() - 添加CSS类

$("#target").addClass("newClass"); 
//#target 指的是需要添加样式的元素的ID 
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类
$("#target").removeClass("oldClass"); 
//#target 指的是需要移除CSS类的元素的ID 
//oldClass 指的是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类。
Javascript 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
jquery遍历json对象集合详解
May 18 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 #Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 #Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 #Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 #Javascript
You might like
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
python实现360的字符显示界面
2014/02/21 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
物理教师自荐信范文
2013/12/28 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
公司开业庆典主持词
2014/03/21 职场文书
妇联主席先进事迹
2014/05/18 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
起诉状范本
2015/05/20 职场文书
七一活动主持词
2015/06/29 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Python绘制分类图的方法
2021/04/20 Python
goland 设置project gopath的操作
2021/05/06 Golang