JavaScript toggleAttribute
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 element.toggleAttribute 方法。此方法提供了一种便捷的方式来切换 DOM 元素上的 HTML 属性，使其在动态 UI 更改中非常有用。
基本定义
toggleAttribute 方法会切换元素上的布尔属性。如果属性存在，则会移除它；如果属性不存在，则会添加它。此方法简化了 JavaScript 中的属性操作。
该方法接受两个参数：属性名和一个可选的 force 布尔值。force 参数决定是添加（true）还是移除（false）属性，而不考虑其当前状态。
基本 toggleAttribute
此示例演示了如何切换按钮上的 disabled 属性。
<!DOCTYPE html>
<html>
<head>
<title>Basic toggleAttribute</title>
</head>
<body>
<button id="myButton">Click Me</button>
<button onclick="toggleButton()">Toggle Disabled</button>
<script>
function toggleButton() {
const button = document.getElementById('myButton');
button.toggleAttribute('disabled');
}
</script>
</body>
</html>
在这个基本示例中，我们有两个按钮。第二个按钮使用 toggleAttribute 来切换第一个按钮的 disabled 状态。
这展示了 toggleAttribute 在布尔属性上的最简单用法。该方法会自动根据属性的当前状态来添加或移除属性。
带 Force 参数的切换
此示例展示了如何使用 force 参数来控制切换行为。
<!DOCTYPE html>
<html>
<head>
<title>Force Parameter</title>
</head>
<body>
<input type="checkbox" id="myCheckbox">
<button onclick="forceCheck()">Force Check</button>
<button onclick="forceUncheck()">Force Uncheck</button>
<script>
function forceCheck() {
const checkbox = document.getElementById('myCheckbox');
checkbox.toggleAttribute('checked', true);
}
function forceUncheck() {
const checkbox = document.getElementById('myCheckbox');
checkbox.toggleAttribute('checked', false);
}
</script>
</body>
</html>
这里我们有一个复选框和两个按钮。第一个按钮强制设置 checked 属性，第二个按钮则强制移除它。
这演示了 force 参数如何覆盖默认的切换行为。当 force 为 true 时，属性始终被添加；当 force 为 false 时，属性始终被移除。
切换自定义数据属性
此示例演示了如何切换元素上的自定义数据属性。
<!DOCTYPE html>
<html>
<head>
<title>Custom Data Attribute</title>
<style>
[data-highlight] {
background-color: yellow;
}
</style>
</head>
<body>
<p id="text">This is some sample text.</p>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<script>
function toggleHighlight() {
const text = document.getElementById('text');
text.toggleAttribute('data-highlight');
}
</script>
</body>
</html>
在这个示例中，我们有一个段落和一个按钮。点击按钮会切换一个自定义数据属性，该属性会改变段落的背景颜色。
这展示了 toggleAttribute 如何与非布尔属性一起工作。CSS 选择器将定位具有 data-highlight 属性的元素以应用样式。
切换多个属性
此示例展示了如何一次切换元素上的多个属性。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Attributes</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="content" hidden aria-hidden="true">Secret content!</div>
<button onclick="toggleContent()">Toggle Content</button>
<script>
function toggleContent() {
const content = document.getElementById('content');
content.toggleAttribute('hidden');
content.toggleAttribute('aria-hidden');
}
</script>
</body>
</html>
这里我们有一个隐藏的 div 和一个按钮。点击按钮会同时切换 hidden 和 aria-hidden 属性。
这演示了如何将多个相关属性一起管理。hidden 属性控制可见性，而 aria-hidden 确保了适当的可访问性。
通过 Class List 切换属性
此示例将属性切换与类列表操作相结合。
<!DOCTYPE html>
<html>
<head>
<title>With Class List</title>
<style>
.active {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p id="text" aria-current="false">Sample text with combined effects.</p>
<button onclick="toggleActive()">Toggle Active</button>
<script>
function toggleActive() {
const text = document.getElementById('text');
text.classList.toggle('active');
text.toggleAttribute('aria-current');
}
</script>
</body>
</html>
在这个示例中，点击按钮会切换段落元素上的 CSS 类和 ARIA 属性。
这表明 toggleAttribute 可以与 classList.toggle 一起使用，以创建全面的 UI 状态更改，包括样式和语义属性。
来源
在本文中，我们展示了如何在 JavaScript 中使用 element.toggleAttribute。此方法提供了一种简洁的方式来动态管理 Web 应用程序中的元素属性。
作者
列出 所有 JS DOM 教程。