在 JavaScript 中为一个元素设置多个属性

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中为一个元素设置多个属性

作者：迹忆客最近更新：2024/03/13 浏览次数：

在本教程文章中，我们将讨论一种借助 JavaScript 为元素设置多个属性的方法。

在 JavaScript 中为一个元素设置多个属性

要使用 JavaScript 一次为一个元素设置多个属性，你需要：

将属性名称和值添加到对象；
使用 Object.keys() 方法获取对象键的数组；
使用 forEach() 方法迭代键数组；
使用 setAttribute() 方法将每个属性及其值添加到元素中。

下面，你可以找到本文所有示例中使用的 HTML 代码。

<html lang="en">
<head>
    <meta charset="UTF-8" />
</head>

<body>
    <button id="btn">Button 1</button>
    <script src="index.js"></script>
</body>
</html>

你可以在下面找到相关 JavaScript 代码的示例。

function setAttributes(element, attributes) {
  Object.keys(attributes).forEach(attr => {
    element.setAttribute(attr, attributes[attr]);
  });
}

const attributes = {
  name: 'example',
  title: 'Box 1',
  disabled: '',
  style: 'background-color: salmon; color: white;',
};

const button = document.getElementById('btn');
setAttributes(button, attributes);

将创建一个可重用函数来获取元素和属性名称和值的对象并将它们添加到元素中。我们将使用 Object.keys() 方法来获取属性名称的数组。

const attributes = {
  name: 'example',
  title: 'Box 1',
  disabled: '',
  style: 'background-color: salmon; color: white;',
};

//  ['name', 'title', 'disabled', 'style']
console.log(Object.keys(attributes));

输出：

将函数与数组中的每个元素一起传递给 Array.forEach 方法。然后，使用 setAttribute 方法在每次迭代时为元素设置一个属性。

如果该属性已存在于元素中，则该值将被更新。否则，将添加具有指定值和名称的新属性。

使用 setAttribute 方法时，你可以设置或替换元素中存在的属性。例如，如果元素具有 style 属性并使用 setAttribute 方法更新其现有 style，你将使用提供的值替换当前样式。

要记住的重要一点是，当布尔属性的值设置为 disabled 时，你可以为该属性指定任何值，并且它将起作用。但是，如果该属性存在，则无论其值如何，其值都将被视为真。

假设不存在布尔属性，例如 false。在这种情况下，属性的值被认为是假的。这就是为什么最好将布尔属性设置为空字符串，这将在元素上设置属性而不需要值。

从 JavaScript 中的元素中删除多个属性

你可以利用 removeAttribute() 方法从元素中删除属性。

const button = document.getElementById('btn');

button.removeAttribute('name');

如果要从一个元素中删除多个属性，可以在添加各种属性时使用相同的方法。

这一次，事情有点简单，因为你只需要删除属性的名称；因此，你可以使用数组而不是对象。

function removeAttributes(element, attributes) {
  attributes.forEach(attr => {
    element.removeAttribute(attr);
  });
}

const attributes = ['name', 'title', 'disabled', 'style'];

const button = document.getElementById('btn');
removeAttributes(button, attributes);