javascript - 如何一次选择两个元素并使我的代码使用 querySelector 影响它们？

Question

我正在为我的网站添加夜间模式。我已经完成了大部分编码部分，同时开始更改有关设计的一些部分。我将需要更改 HTML 中的 hr 并为它们添加实线边框以使其在暗模式下可见。这是我的代码:

<p class="dark">
  <a id="moon" href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); 
                localStorage.getItem('mode') === 'dark' ? 
                document.querySelector('body').classList.add('dark') : 
                document.querySelector('body').classList.remove('dark')" title="nm">Night Mode🌓
                </a>
</p>

我想做的是使用 querySelector 将 class 添加到我的 hr 中，但是一旦我添加了hr 只影响 body 而不是 hr 的代码。我该怎么做才能使代码同时影响它们。

下面的代码有效，但我也找到了一种更简单的方法来做我想做的事。对于 CSS 代码，我只是添加了这段代码，它也运行良好。

body.dark hr {
border: 1px solid #808080;
}

Answer 1

您可以使用 .querySelectorAll() 和 NodeList 的 .forEach() 方法

document.getElementById("moon").addEventListener("click", e => {
  localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'
  const elements = document.querySelectorAll("body, hr");
  elements.forEach(el => {
    if (localStorage.getItem('mode') === 'dark') {
      el.classList.add('dark') 
    } else {
      el.classList.remove('dark')
    }
  })
})