jQuery - 获取并设置 CSS 类

简介: jQuery - 获取并设置 CSS 类

通过 jQuery,可以很容易地对 CSS 元素进行操作。 切换 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() 方法


目录
相关文章
|
3天前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
15天前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
13天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
19天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
16 3
|
20天前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
12 1
|
21天前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
49 2
|
1月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
12 1
|
28天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
24 0
|
前端开发 JavaScript
每日一学—jQuery css()方法
jQuery css()方法的学习
222 0
每日一学—jQuery css()方法
|
前端开发 JavaScript
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
169 0
Web前端学习:jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】