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>

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

下面的代码可以正常工作，但是我也找到了一种轻松实现自己想要的方式的方法。在CSS代码中，我仅添加了此代码，它的工作效果也很好。

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

Answer 1

您可以使用.querySelectorAll()的{{1}}和.forEach()方法

NodeList

如何一次选择两个元素并使我的代码通过querySelector影响两个元素？

1 个答案: