“classList.toggle”不应用样式，但它是手动应用的答案

【问题标题】："classList.toggle" doesn't apply styles, but it gets applied manually“classList.toggle”不应用样式，但它是手动应用的
【发布时间】：2021-03-30 11:43:21
【问题描述】：

我一直在为我的网页创建夜间模式，并在 CSS 中创建了一个特定的类，以便在它切换时应用。但是，它适用于某些元素，但不适用于某些元素。但是当我为没有 classList.toggle 的每个元素编写代码时，它可以工作。我不知道出了什么问题。我什至在控制台中也没有收到错误。如果您能帮助我，我将不胜感激。谢谢。

HTML：

<body id="body">
<div class="top-right">
    <button id="nightMode">Night Mode</button>
</div>
<header>
    <h2>PHOTOGRAPHER</h2>
    <h1>Kylo Ren</h1>
</header>

<section class="pricing" id="price">
    <div class="price-section">
        <div class="price-card">
            <div id="head">
                <h3 class="title">Basic</h3>
            </div>
            <div class="price-sub">
                <div class="sub-sec">
                <h3>100+ Photos</h3>
                </div>
                <div class="sub-sec">
                    <h3>BnW Editing</h3>
                </div>
                <div class="sub-sec">
                    <h3>Soft Copy</h3>
                </div>
                <div class="sub-sec" id="foot">
                    <h3>$499</h3>
                </div>
            </div>
        </div>
    </div>
</section>

<footer id="footer">
    <h4>Powered By Kisara Fernando</h4>
</footer>

CSS：

   .darkTheme{
    background-color: #000;
    color: #fff;
}
.lightTheme{
    background-color: #fff;
    color: #000;
}

JS：

let btn = document.getElementById('nightMode');
let footer = document.getElementById('footer');

btn.addEventListener('click' , changeBg);

function dark(){
    btn.classList.toggle("lightTheme");
    body.classList.toggle("darkTheme");
    footer.classList.toggle("lightTheme");  
    
    document.querySelectorAll('#head')[0].classList.toggle("darkTheme");
    document.querySelectorAll('#head')[1].classList.toggle("darkTheme");
    document.querySelectorAll('#head')[2].classList.toggle("darkTheme");
}


function changeBg(){
    dark();
}

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

您的元素都没有以lightTheme 开头。每次单击按钮时，您的按钮和页脚都会添加/删除 lightTheme（但绝不会是 darkTheme），而您的 body 会添加/删除 darkTheme。

解决方案可能只是将 darkTheme 切换到按钮和正文（页脚将随着正文更新）：

btn.classList.toggle("darkTheme");
body.classList.toggle("darkTheme");

注意：你的 lightTheme 类在这里完全没用。

【讨论】：

我不明白，但 lightTheme 为页脚工作。它不适用于按钮和
。这就是问题