JavaScript 中的样式切换方法

在前端开发中，我们经常需要根据用户交互或者页面状态来切换元素的样式。本篇博客将介绍几种常用的 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 的文本颜色将在红色和蓝色之间切换。