如何反转 JavaScript 中的函数？

Question

我正在制作一个网站，我希望打开和关闭深色模式。我一直在寻找如何反转函数，但由于我很擅长 JavaScript，所以无法设置函数来反转它。所以我想在这里扭转这个局面：<label class="switch">  <input id="input" onclick="changeColor(); changeColo(); changeCol(); changeCo(); changeC();" type="checkbox">  <span class="slider round"></span></label>var colors = ["#2D2D2D"];    var colorIndex = 0;    function changeColor() {        var col = document.getElementById("body");        if( colorIndex >= colors.length ) {            colorIndex = 0;        }        col.style.backgroundColor = colors[colorIndex];        colorIndex++;    }    var colors = ["#332e2e"];    var colorIndex = 0;    function changeColo() {        var col = document.getElementById("article");        if( colorIndex >= colors.length ) {            colorIndex = 0;        }        col.style.backgroundColor = colors[colorIndex];        colorIndex++;    }    var colors = ["#332e2e"];    var colorIndex = 0;    function changeCol() {        var col = document.getElementById("button");        if( colorIndex >= colors.length ) {            colorIndex = 0;        }        col.style.backgroundColor = colors[colorIndex];        colorIndex++;    }    var colors = ["#332e2e"];    var colorIndex = 0;    function changeCo() {        var col = document.getElementById("div");        if( colorIndex >= colors.length ) {            colorIndex = 0;        }        col.style.backgroundColor = colors[colorIndex];        colorIndex++;    }    var colors = ["#2D2D2D"];    var colorIndex = 0;    function changeC() {        var col = document.getElementById("form-container");        if( colorIndex >= colors.length ) {            colorIndex = 0;        }        col.style.backgroundColor = colors[colorIndex];        colorIndex++;    }这就是我需要扭转的。我该怎么做？

Answer 1

我将为您提供一个带有代码的示例，您可以解决其余的问题。

var colors = ["#2D2D2D"]; // I don’t know why you have an array of

// color, but I could get this to be much simpler without using

// array, but I followed your example to make it simpler for you

var colorIndex = 0;

function changeColor() {

    var col = document.getElementById("body");

    if (colorIndex >= colors.length) {

        colorIndex = 0;

    }

    if (colors[colorIndex] == col.getAttribute("currentColor")) {

        col.style.backgroundColor = null; // Take the CSS color

        col.setAttribute("currentColor",col.style.backgroundColor);

    }

    else {

        col.style.backgroundColor = colors[colorIndex];

        col.setAttribute("currentColor", colors[colorIndex]);

    }

    colorIndex++;

}

#body{

    background-color: red;

}

<div id="body">

    <label class="switch">

        <input id="input" onclick="changeColor();" type="checkbox">

        <span class="slider round"></span>

    </label>

</div>

Answer 2

试试这些

方法一：

为浅色和深色主题定义单独的样式。根据所需主题在 body 上设置类

JavaScript：

function toggleTheme() {

   document.getElementsByTagName('body')[0].classList.toggle('light');

   document.getElementsByTagName('body')[0].classList.toggle('dark');

}

CSS：

body.light {

   background-color: white;

   color: black;

}

body.light button {

   background-color: blue;

   color: black;

}

body.dark{

   background-color: black;

   color: white;

}

body.dark button {

   background-color: grey;

   color: black;

}

方法二：

定义变量属性并在您的应用程序中使用这些属性来设置样式

JavaScript：

Same as above

CSS：

body.light {

  --color: black;

  --backgroundColor: white;

}

body.dark {

 --color: white;

 --backgroundColor: black;

}

button {

  color: var(--color);

  background-color: var(--backgroundColor);

}

Answer 3

您可以创建一个变量来处理状态，设置布尔初始值并在每次单击切换按钮时更新其值，例如：

let actived = false;

function setState(){

  if(actived == false){

    changeColor1();

    actived = true;

  } else {

    changeColor2();

    actived = false;

  }

}

<input type="button" (onclick)="setState()"/>