在前端开发中，我们经常需要根据用户交互或者页面状态来切换元素的样式。本篇博客将介绍几种常用的 JavaScript 方法来实现样式切换。
1. 使用 classList 属性
classList 属性提供了一个方便的方法来添加、删除或切换元素的类名。
HTML:
<button id="toggle-btn">切换样式</button> <div id="target-element">我是目标元素</div>
CSS:
.hidden { display: none; } .highlight { background-color: yellow; }
JavaScript:
document.getElementById("toggle-btn").addEventListener("click", function () { const target = document.getElementById("target-element"); target.classList.toggle("hidden"); target.classList.toggle("highlight"); });
在这个示例中，当用户点击按钮时，target-element 的 hidden 和 highlight 类名将被切换。
2. 使用 setAttribute 和 removeAttribute 方法
我们还可以使用 setAttribute 和 removeAttribute 方法来切换元素的行内样式。
HTML:
<button id="toggle-color-btn">切换背景颜色</button> <div id="color-target">我是目标元素</div>
JavaScript:
document.getElementById("toggle-color-btn").addEventListener("click", function () { const target = document.getElementById("color-target"); if (target.getAttribute("style")) { target.removeAttribute("style"); } else { target.setAttribute("style", "background-color: yellow;"); } });
在这个示例中，当用户点击按钮时，color-target 的背景颜色将在黄色和无背景颜色之间切换。
3. 使用 dataset 属性操作自定义数据属性
HTML5 引入了 data-* 自定义数据属性，我们可以使用 JavaScript 的 dataset 属性方便地读取和设置这些属性。
HTML:
<button id="toggle-text-btn">切换文本颜色</button> <div id="text-target" data-color="red">我是目标元素</div>
JavaScript:
document.getElementById("toggle-text-btn").addEventListener("click", function () { const target = document.getElementById("text-target"); const color = target.dataset.color === "red" ? "blue" : "red"; target.style.color = color; target.dataset.color = color; });
在这个示例中，当用户点击按钮时，text-target 的文本颜色将在红色和蓝色之间切换。
