015_获取并设置CSS类

1. hasClass()方法

1.1. hasClass()方法检查被选元素是否包含指定的class。返回true包含指定的class, 反之不包含。

1.2. 语法

$(selector).hasClass(class)

1.3. 参数

1.4. 如果判断多个类是否存在, 请使用空格分隔类名。只有多个类都存在才返回true, 反之返回false。

2. addClass()方法

2.1. addClass()方法向被选元素添加一个或多个类。

2.2. 该方法不会移除已存在的类, 仅仅添加一个或多个类。如果class属性不存在, 也可以直接添加类, 会自动添加class属性。

2.3. 如果要添加的类已经存在, 不会有任何作用, 可以先用hasClass()方法判断一下, 事实上不判断也行, 感觉hasClass()在这里失去了意义。

2.4. 如需添加多个类, 请使用空格分隔类名。

2.5. 语法

$(selector).addClass(class)

2.6. 参数

2.7. 使用函数来添加类

2.7.1. 使用函数向被选元素添加类。

2.7.2. 语法

$(selector).addClass(function(index,oldclass))

2.7.3. 参数

2.8. 例子

2.8.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>addClass添加一个或多个类</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){if(!$("#p1").hasClass('background')) {$("#p1").addClass('background');}});$('#btn2').click(function(){$("#p1").addClass('font margin');});$('#btn3').click(function(){if(!$("#p1").hasClass('border')){$("#p1").addClass(function(index, oldclass){return 'border';});}});});</script></head><body><p id="p1">addClass()方法向被选元素添加一个或多个类。</p><button id="btn1">添加一个类</button> <button id="btn2">添加多个类</button> <button id="btn3">使用函数来添加类</button></body>
</html>

2.8.2. 效果图

3. removeClass()方法

3.1. removeClass()方法从被选元素移除一个或多个类。

3.2. 如果没有规定参数，则该方法将从被选元素中删除所有类。

3.3. 如果要移除的类没有不存在, 不会有任何作用。

3.4. 如需移除多个类, 请使用空格分隔类名。

3.5. 语法

$(selector).removeClass(class)

3.6. 参数

3.7. 使用函数来移除类

3.7.1. 使用函数来删除被选元素中的类。

3.7.2. 语法

$(selector).removeClass(function(index,oldclass))

3.7.3. 参数

3.8. 例子

3.8.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>removeClass移除一个或多个类</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").removeClass('background');});$('#btn2').click(function(){$("#p1").removeClass('font margin');});$('#btn3').click(function(){$("#p1").removeClass(function(index, oldclass){return 'border';});});$('#btn4').click(function(){$("#p1").removeClass();});});</script></head><body><p id="p1" class="background font margin border">removeClass()方法从被选元素移除一个或多个类。</p><button id="btn1">移除一个类</button> <button id="btn2">移除多个类</button> <button id="btn3">使用函数来移除类</button> <button id="btn4">清除所有类</button></body>
</html>

3.8.2. 效果图

4. toggleClass()方法

4.1. toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。

4.2. 该方法检查每个元素中指定的类。如果不存在则添加类, 如果已设置则删除之。这就是所谓的切换效果。

4.3. 如果需要设置或移除多个类, 请使用空格分隔类名。

4.4. 不过, 通过使用"switch"参数, 您能够规定只删除或只添加类。true是添加, false是移除。

4.5. 语法

$(selector).toggleClass(class,switch)

4.6. 参数

4.7. 使用函数来切换类

4.7.1. 使用函数来设置或移除被选元素的一个或多个类进行切换。

4.7.2. 语法

$(selector).toggleClass(function(index,class),switch)

4.7.3. 参数

4.8. 例子

4.8.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>toggleClass设置或移除一个或多个类</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").toggleClass('background');});$('#btn2').click(function(){$("#p1").toggleClass('font margin');});$('#btn3').click(function(){$("#p1").toggleClass(function(index, oldclass){return 'border';});});$('#btn4').click(function(){$("#p1").toggleClass('background', true);});$('#btn5').click(function(){$("#p1").toggleClass('background', false);});});</script></head><body><p id="p1" class="background font margin border">toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。</p><button id="btn1">设置或移除一个类</button> <button id="btn2">设置或移除多个类</button> <button id="btn3">使用函数来设置或移除类</button> <button id="btn4">添加一个类</button> <button id="btn5">移除一个类</button></body>
</html>

4.8.2. 效果图

015_获取并设置CSS类相关推荐

jQuery - 获取并设置 CSS 类、尺寸
jQuery - 获取并设置 CSS 类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 拥有若干进行 CSS 操作的方法: addClass() - 向被选元素添加一个或多 ...
jquery 判断控件css样式,jQuery获取并设置CSS类
jQuery获取并设置CSS类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...
jquery访问css类,jQuery - 获取并设置 CSS 类
2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...
jQuery - 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元 ...
ITK:获取或设置ITK类的成员变量
ITK:获取或设置ITK类的成员变量内容提要 C++实现代码内容提要获取或设置ITK类的成员变量. C++实现代码 #include "itkImage.h" #includ ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...
《Java程序员面试秘笈》—— 1.3 线程信息的获取和设置
本节书摘来异步社区<Java 7并发编程实战手册>一书中的第1章,第1.3节,作者:[西]Javier Fernández González,更多章节内容可以访问云栖社区"异步社 ...
php判断访客语言,php实现获取及设置用户访问页面语言类
本文实例讲述了php实现获取及设置用户访问页面语言类,分享给大家供大家参考.具体分析如下: 该实例User Language Class 获取/设置用户访问的页面语言,如果用户没有设置访问语言,则读取 ...
Pyhton类、实例属性的获取和设置
由于python是一种动态语言,python类和属性的获取和设置非常灵活,本文主要介绍一下几个方面: 实例属性和类属性的绑定:动态绑定属性和方法:__slots__ 的使用:@property的使用 ...

015_获取并设置CSS类

015_获取并设置CSS类相关推荐

最新文章

热门文章