在第一次绘制之前修改 body 的类

Question

希望渺茫，我怀疑我想做的事情最终是不可能的。

我正在尝试在我的网站上实施 dark/light 模式切换。问题是该站点只是 S3 上的静态文件，因此我无法控制服务器端。

我遇到的问题运行是在加载新页面时加载正确的主题，因为该值存储在本地存储中，我需要获取它并在页面加载时更改值。

我目前的方法是在 body 上使用 hidden 的初始 class，当 DOMContentLoaded 时更改为 light 或 dark火灾。不幸的是，这仍然会导致在 class 更改之前发生一次绘制。通过将 JS 放在 <head> 中，我能够绕过 Safari 和 Chrome 中的问题，但不能绕过 Firefox。

初始绘制发生的问题是它会导致极其刺耳的闪烁，尤其是当屏幕快速从白色变为黑色时启用更暗时。

所以我的问题是是否有可能在 DOMContentLoaded 触发之前以某种方式更改 body 的 classes？

谢谢

Answer 1

您可以将 class 添加到 <head> 部分的 <html> 元素，而不是将其添加到正文。

这样，class 将在主体加载之前应用。示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html.dark body{background:black;}
    </style>
    <script>
        document.getElementsByTagName('html')[0].setAttribute('class', 'dark');
    </script>
</head>
<body>

</body>
</html>

在第一次绘制之前修改 body 的类

Modify body's classes before first paint

html

javascript

css

repaint

在第一次绘制之前修改 body 的 类

Modify body's classes before first paint

html

javascript

css

repaint

在第一次绘制之前修改 body 的类