使用javascript全局更改h1标记的颜色

我正在尝试实现一种根据当前时间激活的暗模式

这就是我改变身体背景颜色的方式：

if (darkMode) {
    document.body.style.backgroundColor = '#31403E';
} else {
    document.body.style.backgroundColor = '#F2EDE4';
}

---

我可以以某种全局方式更改h1标记的颜色吗？或者我必须检查每个文档中的属性darkMode，然后指定适当的颜色。

您可以为暗模式定义自定义CSS样式表：

@media (prefers-color-scheme: dark) {  
 color: white;   
  background: black
}

您可以在其中相应地定义自定义规则

使用过滤器还有一个很好的技巧，你可以阅读

你可以在这里看到这个例子：

其中，在使用切换时将class.dark模式设置为HTML文档

html.dark-mode {
    filter: invert(100%);
    img {
        filter: invert(100%);
    }
}

---

使用javascript，您可以这样做：

var elements = document.getElementsByTagName("h1");

for(var i = 0; i < elements.length; i++) {
   elements[i].style.color = "#000";
}

---

首先，他们在css中添加了暗模式首选项，其工作原理如下：

@media (prefers-color-scheme: dark) {
  h1 {
    color: white;
  }
}

但当我们开发主题切换时，一个常见的解决方法是在主体中添加一个黑暗类，并在css中执行以下操作

body.dark h1 {
  color: white;
}

如果必须使用JAVASCRIPT，则必须循环检查DOM中的每一个h1，但它不能在使用JAVASCRIPT的新h1上工作，因为它只能按原样在页面加载上运行

let h1s = document.querySelectorAll("h1"); //gets all the h1s in the page

h1s.forEach( h1 => h1.style.color = "white");

---

在现代JavaScript中，它可以是：

const elements = document.querySelectorAll('h1')
Array.from(elements).forEach(el => el.style.color = '#31403E')

---

希望这有帮助。

您可以试试css变量。我不确定你的意思，但你仍然需要检查每个文档中的属性。这是一个很好的功能，但他们希望根据时间而不是用户的偏好来执行。如果你将代码放在domchanged事件中，最后一个选项仍然可以工作。如果你使用jquery，这是真的。他说的是javascript，所以我假设是vanillaJS。在vanilla JS中，您有一个变异观察者，它是javascript的至宝。老实说，如果他用javascript改变标签颜色，用字符串代替css，他可能对这整件事都不熟悉，这就是为什么我像我一样写每件事：很公平，只是不想让他们认为这简直是不可能的：我想我已经清楚了，因为这是我的错