通过更改暗模式切换，我还想更改引导程序 class

Question

在此处输入引导程序的图像描述我想使用亮模式/暗模式按钮进行“暗模式”切换。

<button type="button" class="btn btn-dark">Dark Mode</button>

按下这个按钮

class="btn btn-dark">  >>>  class="btn btn-light">

随着 class 的变化

<script>
        function darkMode(){
            var body =document.body;
            body.classList.toggle("dark-mode");

            var button =document.getElementById("button");
            if(button.innerHTML == "Dark Mode"){
                button.innerHTML = "Light Mode"
            } else {
                button.innerHTML = "Dark Mode";
                button.innerText
            }
        }
    </script>

我已经到这里了。

我想在引导程序中更改 class，我该怎么做？

Answer 1

您可以像以前一样使用.className 。 例如：

function darkMode(){
    var body = document.body;
    body.classList.toggle("dark-mode");

    var button = document.getElementById("button");
    if(button.innerHTML == "Dark Mode"){
        button.innerHTML = "Light Mode";
        button.className = "btn btn-light";
    } else {
        button.innerHTML = "Dark Mode";
        button.className = "btn btn-dark";
    }
}

如果这解决了您的问题，您可以将其标记为正确。

Answer 2

如果.toggle() 不起作用，也可以使用.addClass() 和.removeClass()。 保留一个toggle值的boolean，去掉已有的class，添加Z84E2C64F38F78BA3EA5C90对应的class。