選擇風格來回

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

yup，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

嘗試是這樣的：

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;   
    }; 
}; 

Answer 3

我想你要找的字「切換」。您希望某些內容從活動狀態變爲非活動狀態，並且與每個用戶交互（即單擊事件）來回移動。

JavaScript有一個可以處理類的函數。例如，下面的代碼行：

target.classList.toggle("active"); 

將作爲一類，如果它是存在添加「活躍」到對象target如果它不存在，並將其取出。這裏是HTML DOM classList Property與toggle和其他方法的更多信息。

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

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

而這裏的.toggleClass() jQuery的方法的文檔。

Answer 4

如果您嘗試使用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>

希望它可以幫助