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

Question

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

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

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

我可以以某种全局方式更改 h1 标签的颜色吗？ 或者我是否必须检查每个文档中的属性darkMode ，然后分配正确的颜色。

Answer 1

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

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

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

还有一个关于使用filter的好技巧，你可以在这里进一步阅读

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

https://codepen.io/rikschennink/pen/GLMLj

当使用切换时，类.dark-mode被设置为 HTML 文档

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

文档

Answer 2

在现代 JavaScript 中，它可能是：

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

希望这可以帮助。

Answer 3

首先，他们在 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");

Answer 4

使用 javascript 你可以这样做：

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

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