jQuery - 获取并设置 CSS 类

jQuery 教程 · 2019-03-09 12:13:48

通过 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"); });

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

实例

$("button").click(function(){ $("body div:first").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"); });

jQuery css() 方法

我们将在下一章讲解 jQuery css() 方法。

点击查看所有 jQuery 教程 文章: https://codercto.com/courses/l/35.html

查看所有标签

集创思维设计矩阵

集创思维设计矩阵

慈思远 / 电子工业出版社 / 2017-4 / 72.00元

《集创思维设计矩阵——写给互联网人的设计指南》总结了作者从业7年以来的设计经历,在大量企业所面对的设计问题基础上,提出了枪型思维,即如何给产品更准确的定位。 在定位准确的基础上加以设计,提出了设计中高维度融合低维度的设计思维,即设计者可以从商业逻辑推演到设计逻辑,让设计更加精确;又提出了设计和计算的博弈,指出在每一步创新的基础上,设计者一定要清晰地评判设计的代价。这样设计后的产品才是可以和企......一起来看看 《集创思维设计矩阵》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具