如何使用 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 函数。添加一个 class 并切换它。

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

而不是操纵 backgroundColor，您可以使用 classList 属性[= 创建 CSS class 和 add/remove 到元素16=]

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 一键切换两种不同颜色

How to switch between two different colors with one button using javascript

html

javascript

click

toggle

addeventlistener