在
jQuery 中，可以通过 `.css()` 方法来指定或修改
元素的 `
style`
属性。以下是如何
使用 jQuery 操作
元素样式的示例。
---
### 解决方案
#### 1. 设置单个样式
属性
如果需要为某个
元素设置一个样式
属性，可以
使用 `.css("property", "value")` 的形式：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
jQuery Style Example</title>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="set-
style-btn">设置样式</button>
<script>
$(document).ready(function() {
$("#set-
style-btn").click(function() {
// 设置单个样式
属性
$("#paragraph").css("color", "red");
});
});
</script>
</body>
</html>
```
---
#### 2. 设置多个样式
属性
如果需要同时设置多个样式
属性，可以
使用 `.css({key: value, key: value})` 的形式：
```
javascript
$("#set-multiple-
style-btn").click(function() {
// 设置多个样式
属性
$("#paragraph").css({
"color": "blue",
"font-size": "20px",
"text-decoration": "underline"
});
});
```
完整代码如下：
```html
<button id="set-multiple-
style-btn">设置多个样式</button>
<script>
$(document).ready(function() {
$("#set-multiple-
style-btn").click(function() {
// 设置多个样式
属性
$("#paragraph").css({
"color": "blue",
"font-size": "20px",
"text-decoration": "underline"
});
});
});
</script>
```
---
#### 3. 获取样式
属性
如果需要获取某个
元素的样式
属性值，可以直接
使用 `.css("property")` 方法：
```
javascript
$("#get-
style-btn").click(function() {
// 获取样式
属性值
let color = $("#paragraph").css("color");
alert("当前字体颜色是：" + color);
});
```
完整代码如下：
```html
<button id="get-
style-btn">获取样式</button>
<script>
$(document).ready(function() {
$("#get-
style-btn").click(function() {
// 获取样式
属性值
let color = $("#paragraph").css("color");
alert("当前字体颜色是：" + color);
});
});
</script>
```
---
### 解释
1. **`.css("property", "value")`**：
- 用于为匹配的
元素设置单个样式
属性。
- 第一个参数是 CSS
属性名（如 `"color"`），第二个参数是
属性值（如 `"red"`）。
2. **`.css({key: value, key: value})`**：
- 用于为匹配的
元素同时设置多个样式
属性。
- 参数是一个对象，键是 CSS
属性名，值是对应的
属性值。
3. **`.css("property")`**：
- 用于获取匹配
元素的第一个
元素的指定样式
属性值。
- 返回值是一个字符串，表示当前的样式值。
4. **事件绑定**：
-
使用 `.click()` 方法为按钮绑定点击事件。
- 当用户点击按钮时，执行相应的样式操作。
---
### 总结
通过
jQuery 的 `.css()` 方法，可以方便地设置或获取
元素的样式
属性。无论是单个
属性还是多个
属性，都可以轻松实现动态样式修改。
---
本文介绍了如何使用jQuery库来增加HTML元素的style属性。通过选择器选取元素，结合.attr()方法设置属性名和属性值，可以方便地修改元素样式。文中提供了一个具体的示例，展示了如何将元素背景颜色更改为黄色。
订阅专栏 解锁全文
扫一扫
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
