如何使用JavaScript使用一个按钮在两种不同的颜色之间切换

Question

我尝试使用JavaScript单击事件侦听器时尝试在两种颜色之间切换。 当我触发click事件时，它将颜色更改为黑色。 当我再次单击它时，我希望它改回到默认值，即白色。 我认为涉及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();

Answer 1

您可以在该元素的classList上使用toggle功能。 添加一个类并切换它。

 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>

您也可以只检查当前颜色并每次切换。

 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>

Answer 2

您可以创建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>

Answer 3

这样做，我认为它对您有用...

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

Answer 4

  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();

如何使用JavaScript使用一个按钮在两种不同的颜色之间切换

问题描述

4 个解决方案

解决方案1
4 已采纳 2018-03-16 06:05:01

解决方案2
2 2018-03-16 06:05:24

解决方案3
0 2018-03-16 06:09:16

解决方案4
0 2018-03-16 06:25:32

如何使用JavaScript使用一个按钮在两种不同的颜色之间切换

问题描述

4 个解决方案

解决方案1 4 已采纳 2018-03-16 06:05:01

解决方案2 2 2018-03-16 06:05:24

解决方案3 0 2018-03-16 06:09:16

解决方案4 0 2018-03-16 06:25:32

解决方案1
4 已采纳 2018-03-16 06:05:01

解决方案2
2 2018-03-16 06:05:24

解决方案3
0 2018-03-16 06:09:16

解决方案4
0 2018-03-16 06:25:32