JavaScript setAttribute()

setAttribute() 方法用于为特定元素设置或添加一个属性，并为其提供一个值。如果该属性已存在，则仅设置或更改该属性的值。因此，我们也可以使用 setAttribute() 方法来更新现有属性的值。如果相应的属性不存在，它将创建一个具有指定名称和值的新属性。此方法不返回任何值。当我们在 HTML 元素上使用属性名时，它会自动转换为小写。

虽然我们可以使用 setAttribute() 方法添加 style 属性，但建议不要为此类样式使用此方法。要添加样式，我们可以使用 style 对象的属性，这将有效地更改样式。可以通过以下代码清楚地说明这一点。

错误用法

建议不要用它来改变样式。

正确用法

更改样式的正确方法如下。

要获取属性的值，我们可以使用 getAttribute() 方法，要从元素中删除特定属性，我们可以使用 removeAttribute() 方法。

如果我们添加一个布尔属性，例如 disabled，那么无论它的值是什么，它总是被视为 true。如果我们希望将布尔属性的值设置为 false，我们必须使用 removeAttribute() 方法 移除整个属性。

语法

此方法的参数不是可选的。使用此方法时，必须包含两个参数。此方法的参数值定义如下。

参数值

attributeName: 这是我们要添加到元素的属性的名称。它不能为空；也就是说，它是必填的。

attributeValue: 这是我们添加到元素的属性的值。它也是必填值。

让我们通过一些示例来理解如何使用 setAttribute() 方法。

示例 1

在此示例中，我们向 ID 为 "link" 的 <a> 标签添加了一个 href 属性，其值为 "https://tpointtech.cn/"。

输出

执行上述代码后，输出将是 -

可以看到，在点击给定的按钮之前，链接并未创建。点击按钮后，输出将是 -

现在，我们可以看到链接已创建。

示例 2

在此示例中，我们使用 setAttribute() 方法更新现有属性的值。在这里，我们通过将 type 属性的值从 text 更改为 button，将文本字段转换为按钮。

我们必须单击指定的按钮才能看到效果。

输出

执行上述代码后，输出将是 -

点击按钮后，输出将是 -

Example3

在这里，我们添加了一个布尔属性 disabled 来禁用指定的按钮。如果我们将 disabled 属性的值设置为空字符串，它会自动设置为 true，这将导致按钮被禁用。

输出

执行上述代码后，输出将是 -

点击按钮后，输出将是 -