如何添加/移除CSS类
在网页设计中,我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的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。
在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className")
,用来判断某个元素是否已经被赋予某个CSS类。
如何添加/移除CSS类的更多相关文章
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- JQ添加移除css样式
1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...
- JQ添加移除css样式--转载 心存善念
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...
- js动态给当前点击元素添加css类
1.页面:
- js活jQuery实现动态添加、移除css/js文件
下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- Jquery添加移除样式
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
随机推荐
- BLUETOOTH_DEVICE_INFO 函数
typedef struct _BLUETOOTH_DEVICE_INFO { DWORD dwSize; BLUETOOTH_ADDRESS Address; ULONG ulClassofDevi ...
- #410div2D. Mike and distribution
D. Mike and distribution time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- @Deprecated使用技巧
本文转自 http://www.cnblogs.com/hzhuxin/p/4645070.html 我们在做项目时,前期写的类中的一些代码可能由于需求变化的原因需要重写,有时重写时方法的传参和返回值 ...
- 8、Transcriptome Assembly
Created by Benjamin M Goetz, last modified on Jun 29, 2015 Assembly of RNA-seq short reads into a tr ...
- 文件格式——gff格式
Gff文件格式 gff格式是Sanger研究所定义,是一种简单的.方便的对于DNA.RNA以及蛋白质序列的特征进行描述的一种数据格式,已经成为序列注释的通用格式,比如基因组的基因预测,许多软件都支持输 ...
- jQuery学习2
1,jQuery中的$有什么意义. $是 JQuery 常用的一个回传函数. 很多人写jquery代码是这样开始的 $(function(){ // do something }); 事实上它是jqu ...
- PPT2010学习笔记(共20讲)
第1讲 商务PPT中的必备元素 # 设计需打破规范 第2讲 封面页设计(一) 大图型封面页 # 基础知识点: 插入矩形和圆形 设置半透明色 设置字体变形效果 图片增强工具 利用过渡色虚化图片边缘 ...
- IIS中使用子目录文件作为默认文档(Default Document)替代重定向
以前一直以为IIS应用程序的默认文档只能设置根目录下的文件,像index.html,default.aspx等,后来经同事指点,原来子目录或者子应用程序下的文件也可以添加到根应用程序的默认文档列表中. ...
- 大部分人的努力程度之低,根本轮不到拼天赋-----作者meiya
格式的正确与否,直接影响了人得阅读感受. 看到书写格式正确,分段清楚,没有错别字,叙事有条理的邮件只有寥寥几封,大多都是一段到底,标点混乱,表达不清,主题不明,短短三行就有两个错别字. ...
- Fiddler-抓Android和IOS包
知识:Fiddler能捕获IOS设备发出的请求,比如IPhone, IPad, MacBook. 等等苹果的设备. 同理,也可以截获Andriod,Windows Phone的等设备发出的HTTP/ ...