Question

这是一个很长的镜头，我怀疑我想要做的事情最终是不可能的。

我正在尝试在我的网站上实现暗/亮模式开关。问题是该网站只是S3上的静态文件，因此没有服务器端，我可以控制它。

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

我当前的方法在身体上使用hidden的初始类，当light触发时更改为dark或DOMContentLoaded。不幸的是，这仍然会导致在更改类之前发生一次绘制。通过将JS放入<head>，我能够避开Safari和Chrome中的问题，但不能解决Firefox。

初始涂料发生的问题是它会导致极度震动，特别是当暗屏更多时，因为屏幕很快从白色变为黑色。

所以我的问题是，在body开火之前，有可能以某种方式改变DOMContentLoaded的类别吗？

由于

Answer 1

您可以从<html>部分将其添加到<head>元素，而不是将该类添加到正文中。

这样，该类将在身体加载之前应用。示例代码：

<!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的类

1 个答案: