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>
输出
在执行上述代码后,输出将为:
点击按钮后,输出将为: