通過更改暗模式切換，我還想更改引導程序 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。