如何反转 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 youvar colorIndex = 0;function changeColor() {&nbsp; &nbsp; var col = document.getElementById("body");&nbsp; &nbsp; if (colorIndex >= colors.length) {&nbsp; &nbsp; &nbsp; &nbsp; colorIndex = 0;&nbsp; &nbsp; }&nbsp; &nbsp; if (colors[colorIndex] == col.getAttribute("currentColor")) {&nbsp; &nbsp; &nbsp; &nbsp; col.style.backgroundColor = null; // Take the CSS color&nbsp; &nbsp; &nbsp; &nbsp; col.setAttribute("currentColor",col.style.backgroundColor);&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; col.style.backgroundColor = colors[colorIndex];&nbsp; &nbsp; &nbsp; &nbsp; col.setAttribute("currentColor", colors[colorIndex]);&nbsp; &nbsp; }&nbsp; &nbsp; colorIndex++;}#body{&nbsp; &nbsp; background-color: red;}<div id="body">&nbsp; &nbsp; <label class="switch">&nbsp; &nbsp; &nbsp; &nbsp; <input id="input" onclick="changeColor();" type="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; <span class="slider round"></span>&nbsp; &nbsp; </label></div>

Answer 2

试试这些方法一：为浅色和深色主题定义单独的样式。根据所需主题在 body 上设置类JavaScript：function toggleTheme() {&nbsp; &nbsp;document.getElementsByTagName('body')[0].classList.toggle('light');&nbsp; &nbsp;document.getElementsByTagName('body')[0].classList.toggle('dark');}CSS：body.light {&nbsp; &nbsp;background-color: white;&nbsp; &nbsp;color: black;}body.light button {&nbsp; &nbsp;background-color: blue;&nbsp; &nbsp;color: black;}body.dark{&nbsp; &nbsp;background-color: black;&nbsp; &nbsp;color: white;}body.dark button {&nbsp; &nbsp;background-color: grey;&nbsp; &nbsp;color: black;}方法二：定义变量属性并在您的应用程序中使用这些属性来设置样式JavaScript：Same as aboveCSS：body.light {&nbsp; --color: black;&nbsp; --backgroundColor: white;}body.dark {&nbsp;--color: white;&nbsp;--backgroundColor: black;}button {&nbsp; color: var(--color);&nbsp; background-color: var(--backgroundColor);}

Answer 3

您可以创建一个变量来处理状态，设置布尔初始值并在每次单击切换按钮时更新其值，例如：let actived = false;function setState(){&nbsp; if(actived == false){&nbsp; &nbsp; changeColor1();&nbsp; &nbsp; actived = true;&nbsp; } else {&nbsp; &nbsp; changeColor2();&nbsp; &nbsp; actived = false;&nbsp; }}<input type="button" (onclick)="setState()"/>