16. jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例样式表
下面的样式表将用于本页的所有例子：

.important
{
font-weight:bold;
font-size:xx-large;
}.blue
{
color:blue;
}

jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例

$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");
});

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body><h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button></body>
</html>

您也可以在 addClass() 方法中规定多个类：
实例

$("button").click(function(){$("#div1").addClass("important blue");
});

jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：
实例

$("button").click(function(){$("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例

$("button").click(function(){$("h1,h2,p").toggleClass("blue");
});

16. jQuery - 获取并设置 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() - 向被选元 ...
015_获取并设置CSS类
1. hasClass()方法 1.1. hasClass()方法检查被选元素是否包含指定的class.返回true包含指定的class, 反之不包含. 1.2. 语法 $(selector).has ...
jquery获取和设置属性_jQuery获取属性，设置属性，删除属性
jquery获取和设置属性 Today we will look into following examples – jQuery get attribute, jQuery set attribut ...
jQuery获取和设置元素
本篇文章聊聊如何使用jQuery获取和设置元素内容与值. 一.获取和设置元素内容在 jQuery 中,操作元素内容的方法包括 html() 和 text().前者与 JavaScript 中的 in ...
jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
ITK:获取或设置ITK类的成员变量
ITK:获取或设置ITK类的成员变量内容提要 C++实现代码内容提要获取或设置ITK类的成员变量. C++实现代码 #include "itkImage.h" #includ ...
jQuery获取或设置元素的属性值
jQuery获取或设置元素的属性值获取元素属性值固有属性($('div).prop('color')) 自定义属性($('div).attr('index')) //html代码<a hre ...

16. jQuery - 获取并设置 CSS 类

16. jQuery - 获取并设置 CSS 类相关推荐

最新文章

热门文章