如何使用带有 NodeList/Array 的切换功能来切换具有相同 class 的所有部分的暗模式？

Question

这是HTML代码：

<div class="page" id="page-home">
        <!-- Blueprint header -->
        <header class="header cf">
            <img class="poster" src="images/Logo_square.png" style="" alt="Logo" />
            <h1 class="header__title">Experts in .......</h1>
            <br>
            <p class="header__desc">Let's get &#x27B2; <a id="quote">Connected</a></p>
            
            <button onclick="myFunction()">Toggle dark mode</button>
        </header>

    </div>

    <div class="page" id="page-services">....</div>
    <div class="page page--inactive" id="page-aboutus">.....</div>
    <div class="page page--inactive" id="page-contactus">...</div>
    <div class="page page--inactive" id="page-projects">....</div>
    <div class="page page--inactive" id="page-history">.....</div>

我想让切换按钮改变所有类 class=" page" 和 class="page page--inactive" 到 class=" page page_dark" 和 class=" page page_dark page--inactive" 我在其中设置了深色模式颜色。我试过下面提到的代码，但它不起作用

function myFunction() {
    document.body.classList.toggle("body_dark");
    var page_list = document.querySelectorAll('.page');
    var page_array = [page_list]; // converts NodeList to Array
    
    for(var i = 0 ; i < page_array.length; i++){
        console.log(page_array[i]);
        page_array[i].classList.toggle("page_dark");        
    }
}

样式表如下：

.body_dark{
    color: #bdbdbd;
    background: #1d1e21 !important;
}

body {
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
    margin: 0;
    color: #696969;
    background: #e7e7e7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y:auto;
}
.js .page.page_dark {
    background: linear-gradient(#333 -2%, #000000 1%);
}

.js .page {
    position: relative;
    z-index: 5;
    overflow: auto;
    width: 100%;
    height: 100vh;
    pointer-events: auto;
    background: linear-gradient(#eee -2%, #ffffff 1%);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}

如果您可能需要查看有关代码的更多详细信息，请在下方评论，我很乐意与您分享。我没有使用 id，因为字体颜色和其他页面上的内容会发生变化，使用不同的 id 单独更新会很头疼。

Answer 1

先生，我有点变了。

转换为数组应该使用 ... 扩展运算符。

function myFunction() {
    document.body.classList.toggle("body_dark");
    var page_list = document.querySelectorAll(".page");
    var page_array = [...page_list]; // converts NodeList to Array
    page_array.forEach((page) => {
      page.classList.toggle("page_dark");
    });
  }

如果您使用的是 IE，请在 Chrome 或 FF

上查看

如何使用带有 NodeList/Array 的切换功能来切换具有相同 class 的所有部分的暗模式？

How can I use Toggle Function with NodeList/Array to toggle dark mode in all sections with same class?

javascript

arrays

class

nodelist

dom-events