来回改变风格

Question

码:

<style> .demo {color: yellow; background-color: purple} </style>
<p class="demo">my text</p>
<button id="change">click</button>
<script>
window.onload = function () {
var flipColors = query("#change"); 
  var target = query(".demo");
  flipColors.onclick = function() {
    style(target, "color", "white");
    style(target, "background-color", "black");
  };
};
</script>

当我单击按钮时,样式会发生变化.

我的问题是我需要向JS添加什么,当按钮再次点击时 - 它将恢复原始样式,如果再次单击它将再次激活该功能,而不是制作两个按钮.

我知道我可以创建.demo和.demo1分类并切换它们,但我想了解如何以这种方式实现 - 如果有可能的话.

注意:只是简单的JS,而不是JQuery等.

Answer 1

是的，toggle() 在这里工作得非常好。我确实创建了两个切换类，并且 JavaScript 最初只是打开一个类，然后切换这两种状态。

var flipColors = query("#change"); 
  var target = query(".demo");
  target.classList.add("demo-on");
  
  
  toggleClasses = function toggleClasses() {
    target.classList.toggle("demo-on");
    target.classList.toggle('demo-off');
  };

.demo-off {
  color: yellow;
  background-color: purple;
}
.demo-on {
  color: purple;
  background-color: yellow;
}

<p class="demo">my text</p>
<button id="change" onclick="toggleClasses()">click</button>

啊，但是您不想实际切换类，而是切换 css 属性？轻松完成。试试这个：

var theToggle = document.getElementById("change");
var toggleMe = document.getElementsByClassName("demo")[0];
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      toggleMe.style.color = "purple";
      toggleMe.style.backgroundColor = "yellow";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      toggleMe.style.color = "yellow";
      toggleMe.style.backgroundColor = "purple";
      break;
  }
}

.demo {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<p class="demo">my text</p>
<button id="change">click</button>

这是纯 js，我添加了一个属性，用于检查要使用的状态，但您可以轻松地关闭 switch 语句，例如，toggleMe.style.color - 希望这有帮助！