Javascript &引用；classList.toggle"；不'；不应用样式，但手动应用_Javascript_Html_Css_Dom

Javascript &引用；classList.toggle"；不'；不应用样式，但手动应用

javascript html css dom

Javascript &引用；classList.toggle"；不'；不应用样式，但手动应用,javascript,html,css,dom,Javascript,Html,Css,Dom,我一直在为我的网页创建一个夜间模式，并在CSS中创建了一个特定的类，以便在切换时应用。但是，它适用于某些元素，但不适用于某些元素。但是，当我为每个元素编写代码时，如果没有classList.toggle，它就会工作。我不知道出了什么问题。我甚至不会在控制台中看到错误。如果你能帮助我，我将不胜感激。多谢各位 HTML: JS: 没有一个元素以lightThemeset开头。每次单击按钮时，按钮和页脚都会添加/删除lightTheme（但不会添加/删除暗色），身体也会添加/删除暗色一个解决方案可能

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

HTML:

JS:

没有一个元素以

lightTheme

set开头。每次单击按钮时，按钮和页脚都会添加/删除lightTheme（但不会添加/删除暗色），身体也会添加/删除暗色

一个解决方案可能是将暗色切换到按钮和主体（页脚将随主体更新）：

注意：您的lightTheme类在这里将完全无用。

您的元素中没有一个以

lightTheme

集合开头。每次单击按钮时，按钮和页脚都会添加/删除lightTheme（但不会添加/删除暗色），身体也会添加/删除暗色

一个解决方案可能是将暗色切换到按钮和主体（页脚将随主体更新）：

注意：您的lightTheme类在这里完全没有用处。

我不明白，但lightTheme对页脚有效。它不适用于按钮和按钮。这就是问题所在，我不明白，但lightTheme对页脚有效。它不适用于按钮和按钮。这就是问题所在

<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>

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

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();
}

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