使用 JavaScript 向多个元素添加属性
将一个类添加到多个元素：
-
使用
document.querySelectorAll()方法选择元素。 -
使用
forEach方法迭代元素集合。 -
使用
setAttribute方法为每个元素添加一个属性。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const boxes = document.querySelectorAll('.box');
boxes.forEach((box, index) => {
box.setAttribute('id', `box-${index}`);
});
我们使用 document.querySelectorAll 方法来选择具有 box 类的所有元素。
我们使用 NodeList.forEach 方法迭代 NodeList。
为了给每个元素添加一个属性，我们使用了
setAttribute方法。
setAttribute 方法有两个参数：
- name - 要设置其值的属性的名称。
- value - 分配给属性的值。
在示例中，我们为 NodeList 中的每个元素添加了一个 id 属性。
如果该属性已存在，则更新该值，否则添加具有指定名称和值的新属性。
querySelectorAll 方法采用一个或多个选择器，因此我们能够选择具有多个不同类、id、标签等的元素。
下面是一个使用该方法获取具有 3 个不同类的元素集合的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<script src="index.js"></script>
</body>
</html>
下面是JavaScript代码
const boxes = document.querySelectorAll('.box1, .box2, .box3');
boxes.forEach((box, index) => {
box.setAttribute('id', `box-${index}`);
});
我们通过用逗号分隔将 3 个不同的选择器传递给 querySelectorAll 方法。
我们可以通过在 id 值前加上 # 来将 id 传递给方法，例如 ＃my-id。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
