选择风格来回

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>

希望它可以帮助