动态更改CSS样式

Question

动态更改CSS样式

我正在尝试更改HTML页面的引导CSS样式（我将其称为theme）。我想在rows和cards样式之间切换，我已经设法通过一些JavaScript和DOM操作来做到这一点。我还将当前主题保存在本地存储中，因此在刷新页面时，我可以设置所选主题。我会在window.onload活动中全力以赴。

当我刷新页面时会出现问题：正确设置了主题，但它首先显示了默认主题，然后将其渲染为localStorage。

设置正确的主题时，如何避免这种延迟？

Answer 1

Cer*_*nce 5

两个想法：

通常最好改为监听DOMContentLoaded。load只有下载所有图像，媒体等后，事件才会触发。这很可能在初始页面加载之后发生，因此浏览器有时间在此同时进行初始绘制，这意味着该load事件显然在稍后发生。相反，当DOM被解析且可交互时，将触发DOMContentLoaded，而不会产生额外的延迟。但是，不必立即解析DOM- （例如）在DOM的前半部分的加载与其余部分的加载之间可能会有一些延迟，因此另外：
在页面的开始，用CSS隐藏主页内容（例如文章），也许用article { display: none }或类似的东西。然后，在DOMContentLoaded侦听器中，摆弄DOM / CSS并根据需要更改主题，然后使文章可见。这将确保用户看到的初始绘画将以所需的主题进行绘画，而不是看到一个主题，然后紧接着是实际的所需主题。

如果您可以单独使用CSS进行所有主题更改，则最好在开始加载正文之前，在中立即设置正确的样式表<head>。（不要将CSS部分放在DOMContentLoaded侦听器中。）但这只是在您的DOM更改不涉及Javascript的情况下的一种选择。

这是一个很好的答案，但是我要补充一件事。设置“ body {display：none}”，使用户在加载DOM内容时看不到任何东西是不好的。如果用户在1或2秒钟内看不到任何内容，则可能会认为页面已损坏或速度太慢。显示加载微调框或占据整个屏幕直到DOM内容加载的东西，然后显示页面会更好。 (2认同)

归档时间：	6 年，3 月前
查看次数：	43 次
最近记录：	6 年，3 月前