JavaScript setAttribute() 方法

摘要：在本教程中，您将学习如何使用 JavaScript setAttribute() 方法为指定元素的属性设置值。

JavaScript setAttribute() 方法简介

要设置指定元素属性的值，请使用 setAttribute() 方法

element.setAttribute(name, value);Code language: CSS (css)

参数

name 指定要设置其值的属性名称。如果您在 HTML 元素上调用 setAttribute()，它将自动转换为小写。

value 指定要分配给属性的值。如果您向方法传递非字符串值，它将自动转换为字符串。

返回值

setAttribute() 返回 undefined。

请注意，如果属性已存在于元素上，则 setAttribute() 方法会更新该值；否则，它将使用指定的 name 和 value 添加一个新的属性。

通常，在对选定元素调用 setAttribute() 之前，您会使用 querySelector() 或 getElementById() 来选择元素。

要获取属性的当前值，请使用 getAttribute() 方法。要删除属性，请调用 removeAttribute() 方法。

JavaScript setAttribute() 方法示例

请参见以下示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS setAttribute() Demo</title>
</head>
<body>
    <button id="btnSend">Send</button>

    <script>
        let btnSend = document.querySelector('#btnSend');
        if (btnSend) {
            btnSend.setAttribute('name', 'send');
            btnSend.setAttribute('disabled', '');
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，使用 querySelector() 方法选择 id 为 btnSend 的按钮。
其次，使用 setAttribute() 方法将 name 属性的值设置为 send。
第三，设置 disabled 属性的值，以便当用户单击按钮时，它不会执行任何操作。

请注意，disabled 属性很特殊，因为它是一个布尔属性。如果存在布尔属性，无论其具有什么值，该值都被认为是 true。要将布尔属性的值设置为 false，您需要使用 removeAttribute() 方法删除整个属性。

摘要

使用 setAttribute() 为指定元素的属性设置值。
将布尔属性的值设置为任何值，该值将被认为是 true。

测验

本教程对您有帮助吗？