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://www.codercto.com/courses/l/35.html

查看所有标签

众媒时代

众媒时代

腾讯传媒研究 / 中信出版集团股份有限公司 / 2016-3-1 / CNY 52.00

众媒时代,就是一个大众参与的媒体时代。互联网将传统媒体垄断而单一的传播方式彻底颠覆。人人都可以通过互联网成为内容的制造者、传播者。每个人都是媒体,人是种子,媒体变成了土壤。 当我们的信息入口被朋友圈霸占,当我们的眼睛只看得到10W+,当我们不可抑制地沉浸在一次次的“技术狂欢”中,当人人都可以举起手机直播突发现场,当未来的头条由机器人说了算……内容正生生不息地以各种可能的形式出现,我们正彻头彻......一起来看看 《众媒时代》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具