如何使用JavaScript使用一个按钮在两种不同的颜色之间切换
[英]How to switch between two different colors with one button using javascript
问题描述
Im trying to change between two colors when I click on the event listener using JavaScript. 
我尝试使用JavaScript单击事件侦听器时尝试在两种颜色之间切换。 When I trigger the click event, it changes the color to black. 当我触发click事件时，它将颜色更改为黑色。 When I click on it again, I want it to change back to the default, which is white. 当我再次单击它时，我希望它改回到默认值，即白色。 I think that an if statement is involved, but Im not sure how the logic would work in this case. 我认为涉及if语句，但是我不确定在这种情况下逻辑将如何工作。
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<link rel="stylesheet" href="light.css" />
</head>
<body id="body">
<button id="submit">Submit
<label id="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</button>
<script src="light.js"></script>
</body>
</html>
function start() {
var submit = document.getElementById("submit");
submit.addEventListener("click", toggle);
};
function toggle() {
var color = document.getElementById("body");
color.style.backgroundColor = "black";
};
start();
4 个解决方案
解决方案1
4 已采纳 2018-03-16 06:05:01
You can use toggle function on the classList of that element. 您可以在该元素的classList上使用toggle功能。 Add a class and toggle it. 添加一个类并切换它。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); color.classList.toggle('black'); }; start();
.black { background-color: black; }
<body id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </body>
You can also just check the current color and switch every time. 您也可以只检查当前颜色并每次切换。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); var backColor = color.style.backgroundColor; color.style.backgroundColor = backColor === "black" ? "white" : "black"; }; start();
<body id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </body>
解决方案2
2 2018-03-16 06:05:24
Instead of manipulating backgroundColor , You can create CSS class and add/remove it to the element using classList property 您可以创建CSS类，然后使用classList属性将其添加/删除到元素中，而无需操纵backgroundColor 。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); color.classList.toggle("black"); }; start();
.black { background-color: black; }
<div id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </div>
解决方案3
0 2018-03-16 06:09:16
Do like this, i think it work for you... 这样做，我认为它对您有用...
var background = document.getElementById(id).style.background;
var btn = addEventListener("click", function (){
if(background = "rgb(255,145,0)"){
document.getElementById(id).style.background = "red";
}
else
{
document.getElementById(id).style.background = "white";
}
});
解决方案4
0 2018-03-16 06:25:32
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); if(color.style.backgroundColor==='black') color.style.backgroundColor=''; else color.style.backgroundColor = "black"; }; start();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.