jQuery 样式操作
# jQuery 样式操作
# 1. 操作 css 方法
jQuery 可以使用 css 方法来修改元素的样式。它可以通过多种方式使用，既可以获取样式属性的值，也可以设置单个或多个样式属性。
# 1.1 获取样式属性值
如果 css 方法只传入属性名，则会返回该属性的当前值。
// 获取当前元素的颜色属性值
var color = $(this).css('color');
console.log(color); // 输出当前颜色值
1
2
3
2
3
# 1.2 设置单个样式属性
如果 css 方法传入属性名和属性值，则会设置该属性的值。属性名必须用引号包裹，值如果是数字可以不用跟单位和引号。
// 设置当前元素的颜色属性值为红色
$(this).css('color', 'red');
1
2
2
# 1.3 设置多个样式属性
css 方法可以传入一个对象，方便一次设置多组样式。对象的属性名和属性值用冒号隔开，属性名可以不用引号。
// 设置当前元素的颜色为白色，字体大小为20像素
$(this).css({ "color": "white", "font-size": "20px" });
1
2
2
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 样式操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 获取当前元素的颜色属性值
var color = $('p').css('color');
console.log(color); // 输出当前颜色值
// 设置当前元素的颜色属性值为红色
$('p').css('color', 'red');
// 设置当前元素的颜色为白色，字体大小为20像素
$('p').css({ "color": "white", "font-size": "20px" });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 2. 设置类样式方法
addClass、removeClass 和 toggleClass 方法用于添加、移除或切换元素的类样式。
# 2.1 添加类
使用 addClass 方法可以向元素添加一个或多个类。
// 向所有 div 元素添加类 current
$('div').addClass('current');
1
2
2
# 2.2 移除类
使用 removeClass 方法可以从元素中移除一个或多个类。
// 从所有 div 元素中移除类 current
$('div').removeClass('current');
1
2
2
# 2.3 切换类
使用 toggleClass 方法可以切换元素的类。如果元素中存在该类，则移除它；如果不存在，则添加它。
// 切换所有 div 元素中的类 current
$('div').toggleClass('current');
1
2
2
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 类样式操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 向所有 div 元素添加类 current
$('div').addClass('current');
// 从所有 div 元素中移除类 current
$('div').removeClass('current');
// 切换所有 div 元素中的类 current
$('div').toggleClass('current');
});
</script>
<style>
.current {
background-color: yellow;
}
</style>
</head>
<body>
<div>这是一个 div 元素。</div>
<div>这是另一个 div 元素。</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 3. 类操作与 className 区别
在原生 JavaScript 中，className 属性用于设置或获取元素的类名。与 jQuery 类方法不同，className 会覆盖元素原先的类名。
原生 JavaScript 示例：
// 设置元素的类名
var element = document.getElementById('myDiv');
element.className = 'newClass'; // 原来的类名会被覆盖
1
2
3
2
3
jQuery 示例：
jQuery 的类操作方法不会覆盖元素原先的类名，只对指定的类进行操作。
// 向元素添加类
$('#myDiv').addClass('newClass'); // 原来的类名不会被覆盖
1
2
2
通过 jQuery 的类操作方法，可以方便地操作元素的类名而不影响其他类。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08