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>

输出

在执行上述代码后,输出将为:

1.png

点击按钮后,输出将为:

2.png

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全