JavaScript setAttribute
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.setAttribute 方法。此方法对于 DOM 操作至关重要，它允许开发人员动态地向 HTML 元素添加或修改属性。
基本定义
setAttribute 方法用于设置指定元素的属性值。如果属性已存在，则更新其值；否则，将添加具有指定名称和值的新属性。
此方法接受两个参数：属性名称（字符串）和属性值（字符串）。它广泛用于修改类、ID、样式和自定义数据属性等元素属性。
基本 setAttribute 示例
此示例演示了如何为 HTML 元素设置简单属性。
<!DOCTYPE html>
<html>
<head>
<title>Basic setAttribute</title>
</head>
<body>
<div id="myDiv">Sample Content</div>
<button onclick="addClass()">Add Class</button>
<script>
function addClass() {
const div = document.getElementById('myDiv');
div.setAttribute('class', 'highlight');
}
</script>
</body>
</html>
在此基本示例中，我们有一个 div 元素和一个按钮。当按钮被点击时，addClass 函数使用 setAttribute 向 div 添加一个 'highlight' 类。
这展示了 setAttribute 修改元素属性的基本用法。该方法同时适用于标准的 HTML 属性和自定义属性。
更改图片源
此示例展示了如何使用 setAttribute 动态更改图片源。
<!DOCTYPE html>
<html>
<head>
<title>Changing Image Source</title>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="Sample Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
const img = document.getElementById('myImage');
img.setAttribute('src', 'image2.jpg');
img.setAttribute('alt', 'New Image');
}
</script>
</body>
</html>
这里我们有一个 image 元素和一个按钮。点击按钮时，它使用 setAttribute 同时更改图片源和 alt 文本。
这演示了 setAttribute 如何一次性更新多个属性。对于图片切换等动态内容更改特别有用。
添加数据属性
此示例演示了如何向元素添加自定义数据属性。
<!DOCTYPE html>
<html>
<head>
<title>Data Attributes</title>
</head>
<body>
<div id="info">User Information</div>
<button onclick="addData()">Add Data</button>
<script>
function addData() {
const div = document.getElementById('info');
div.setAttribute('data-user-id', '12345');
div.setAttribute('data-role', 'admin');
}
</script>
</body>
</html>
在此示例中，当按钮被点击时，我们向 div 元素添加自定义数据属性。这些属性遵循 HTML5 data-* 命名约定。
自定义数据属性对于在 HTML 元素中存储额外信息非常有用，这些信息稍后可以通过 JavaScript 访问。setAttribute 非常适合此目的。
禁用按钮
此示例展示了如何使用 setAttribute 禁用按钮。
<!DOCTYPE html>
<html>
<head>
<title>Disabling a Button</title>
</head>
<body>
<button id="myButton" onclick="disableMe()">Click to Disable</button>
<script>
function disableMe() {
const btn = document.getElementById('myButton');
btn.setAttribute('disabled', '');
btn.textContent = 'Button Disabled';
}
</script>
</body>
</html>
这里我们有一个按钮，点击时会禁用自身。setAttribute 方法向按钮添加 'disabled' 属性。
像 'disabled' 这样的布尔属性不需要值——它们的存在本身就会改变元素的行为。setAttribute 正确处理这些情况。
更改输入类型
此示例演示了如何动态更改输入字段的类型。
<!DOCTYPE html>
<html>
<head>
<title>Changing Input Type</title>
</head>
<body>
<input id="myInput" type="text" placeholder="Enter password">
<button onclick="togglePassword()">Show/Hide Password</button>
<script>
function togglePassword() {
const input = document.getElementById('myInput');
const currentType = input.getAttribute('type');
if (currentType === 'password') {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
}
</script>
</body>
</html>
在此示例中，我们在 text 和 password 类型之间切换输入字段。setAttribute 方法根据其当前值修改 'type' 属性。
这演示了如何将 setAttribute 与 getAttribute 结合使用以创建切换功能。这是密码可见性切换的常见模式。
来源
在本文中，我们展示了如何在 JavaScript 中使用 element.setAttribute。此方法对于 Web 开发中的动态属性操作至关重要。
作者
列出 所有 JS DOM 教程。