JavaScript教程-JavaScript setAttribute() 方法
setAttribute() 方法用于向特定元素设置或添加属性，并为其提供一个值。如果属性已经存在，它只会设置或更改属性的值。因此，我们还可以使用 setAttribute() 方法来更新现有属性的值。如果对应的属性不存在，它将使用指定的名称和值创建一个新的属性。该方法不返回任何值。当在 HTML 元素上使用它时，属性名称会自动转换为小写。
尽管我们可以使用 setAttribute() 方法添加 style 属性，但不建议使用此方法进行样式设置。为了添加样式，我们可以使用样式对象的属性，这将有效地更改样式。通过以下代码可以清楚地理解这一点。
错误的方式
不建议使用它来更改样式。
element.setAttribute("style", "background-color: blue;");正确的方式
更改样式的正确方式如下。
element.style.backgroundColor = "blue";要获取属性的值，我们可以使用 getAttribute() 方法，要从元素中删除特定属性，可以使用 removeAttribute() 方法。
如果我们要添加布尔属性（如 disabled），则它的值无论如何都被视为 true。如果需要将布尔属性的值设置为 false，必须使用 removeAttribute() 方法 删除整个属性。
语法
element.setAttribute(attributeName, attributeValue);此方法的参数不是可选的。在使用此方法时，必须包括这两个参数。此方法的参数值定义如下。
参数值
attributeName： 要添加到元素的属性的名称。它不能留空，即它不是可选的。
attributeValue： 要添加到元素的属性的值。这也不是可选的值。
让我们通过一些示例了解如何使用 setAttribute() 方法。
示例1
在此示例中，我们将使用 setAttribute() 方法为具有 id = "link" 的 <a> 标签添加一个值为 "https://www.javatiku.cn/" 的 href 属性。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript setAttribute() 方法</title>
<script>
function fun() {
document.getElementById("link").setAttribute("href", "https://www.javatiku.cn/");
}
</script>
</head>
<body style="text-align: center;">
<h2>这是使用 setAttribute() 方法添加属性的示例。</h2>
<a id="link">javaTiku.cn</a>
<p>点击以下按钮查看效果。</p>
<button onclick="fun()">添加属性</button>
</body>
</html>示例2
在此示例中，我们将使用 setAttribute() 方法更新现有属性的值。在这里，我们通过将 type 属性的值从 text 更改为 button，将文本字段转换为按钮。
我们需要点击指定的按钮以查看效果。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript setAttribute() 方法</title>
<script>
function fun() {
document.getElementById("change").setAttribute("type", "button");
}
</script>
</head>
<body style="text-align: center;">
<h2>这是一个示例，使用 setAttribute() 方法更新属性的值。</h2>
<input id="change" type="text" value="javaTiku"/>
<p>点击以下按钮查看效果。</p>
<button onclick="fun()">更改</button>
</body>
</html>示例3
在这里，我们将使用 setAttribute() 方法添加布尔属性 disabled 来禁用指定的按钮。如果将 disabled 属性的值设置为空字符串，它会自动设置为 true，从而导致按钮被禁用。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript setAttribute() 方法</title>
<script>
function fun() {
document.getElementById("btn").setAttribute("disabled", "");
}
</script>
</head>
<body style="text-align: center;">
<h2>setAttribute() 方法示例。</h2>
<p>点击以下按钮查看效果。</p>
<button onclick="fun()" id="btn">点击我</button>
</body>
</html>输出
在执行上述代码后，输出将为：
点击按钮后，输出将为：
