來回改變風格

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 - 希望這會有所幫助！

Answer 2

我認為你正在尋找的這個詞是“Toggle”。 您希望某些內容從“活動”變為“非活動”，並在每次用戶交互時來回切換，即點擊事件。

Javascript有一個用類處理它的函數。 例如，以下代碼行：

target.classList.toggle("active");

將“活動”作為類添加到對象target如果它不存在），並將其刪除（如果它存在）。 以下是有關toggle和其他方法的HTML DOM classList屬性的更多信息。

但是如果你正在尋找一個jQuery解決方案，那么它有一個類似的功能：

$(".class").toggleClass("active"); 

這是.toggleClass（） jQuery方法的文檔。

Answer 3

如果您嘗試使用javascript實現切換行為

您可以執行以下代碼段

檢查這個片段

 window.onload = function() { var flipColors = document.querySelector("#change"); var target = document.querySelector(".demo"); flipColors.onclick = function() { toggleStylechanges(target, "color", "white"); toggleStylechanges(target, "backgroundColor", "black"); }; } function toggleStylechanges(element, cssProp, color) { if (element.style[cssProp] == "") element.style[cssProp] = color; else element.style[cssProp] = ""; } 

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

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

希望能幫助到你

Answer 4

嘗試這樣的事情：

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    if(clicked) {
      style(target, "color", "yellow");
      style(target, "background-color", "purple");
    } else {
      style(target, "color", "white");
      style(target, "background-color", "black");
    }
    clicked = !clicked;
  };
};

更短的版本：

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    var color = clicked ? "yellow" : "white";
    var bgColor = clicked ? "purple" : "black";
    style(target, "color", color);
    style(target, "background-color", bgColor);
    clicked = !clicked;        
  };
};