javascript - 切换 CSS 类的纯 Javascript 替代方案？

Question

我的目标是在每次点击时将 div 旋转 180 度，而不切换 CSS 类。

我可以通过第一次点击实现一次旋转 (.style.transform = “旋转(180 度)”；)，但任何后续点击均无效。

顺便说一句，为什么会这样？ div 的 Id 没有改变，因此，理论上，相同的触发器(在本例中为单击)应该调用相同的函数，对吗？但事实并非如此。我想知道这里的逻辑是什么，技术解释是什么，然后开始实践，我如何进一步操作这个 post-div(即，在其 JavaScript 操作之后的原始 div)——再次，而不切换 CSS 类。

function rotate() {
    document.getElementById("container").style.transform = 
    "rotate(180deg)";
}

.container {
    width: 200px;
    height: 400px;
    border: 5px solid;
    border-bottom-color: blue;
    border-top-color: red;
}

<div class="container" id="container" onclick="rotate()"></div>

    

Answer 1

第一次将转换从 "" 更改为 "rotate(180deg)"，所以它会旋转。

随后您将其从 "rotate(180deg)" 更改为 "rotate(180deg)" ……这根本不是更改，因此什么也没有发生。

如果你想改变它，那么你需要给它分配一个不同的值。

例如

const style = document.getElementById("container").style;
if (style.transform) {
    style.transform = "";
} else {
    style.transform = "rotate(180deg)";
}

切换类更简单、更清晰。

document.querySelector("#container").addEventListener("click", e => e.currentTarget.classList.toggle("rotated"));

.container {
  width: 200px;
  height: 400px;
  border: 5px solid;
  border-bottom-color: blue;
  border-top-color: red;
  transition: transform 0.25s;
}

.rotated {
  transform: rotate(180deg);
}

<div class="container" id="container"></div>