解决JavaScript暗黑模式页面加载时失效的问题

### 解决JavaScript暗黑模式页面加载时失效的问题 正如摘要所述，本教程旨在解决WordPress网站暗黑模式在页面加载时失效的问题。通常，JavaScript代码在页面加载完成后才会执行，导致一些需要在页面初次渲染时生效的功能，如暗黑模式的初始化，出现延迟或失效的情况。 以下是一种解决该问题的方案，通过定义一个初始化主题的函数，并在页面加载完成后立即调用该函数，确保暗黑模式或其他主题模式在页面初次渲染时即可生效。 #### 解决方案：定义并立即执行初始化函数 问题在于，原代码仅在点击事件触发时才执行主题切换逻辑。为了在页面加载时也执行该逻辑，我们需要将其封装成一个函数，并在页面加载完成后立即调用。 ```javascript let bodyMode = document.querySelector("#pageMode"); let SystemMode = document.querySelector(".pageSystemMode"); let DarkMode = document.querySelector(".pageDarkMode"); let LightMode = document.querySelector(".pageLightMode"); let HalfLitMode = document.querySelector(".pageHalfLitMode"); function initTheme() { const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; if (UserMode) { $(bodyMode).addClass("bodyDark"); $(bodyMode).removeClass("bodyLight bodyHalfLit"); } else { $(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit"); } } // 点击事件监听器 SystemMode.addEventListener("click", function () { initTheme(); }); // 立即执行初始化函数 initTheme();

代码解释：

1. initTheme() 函数： 该函数包含了原代码中用于判断用户系统主题模式并切换页面主题的逻辑。
2. 点击事件监听器： 保留了原有的点击事件监听器，确保用户点击按钮时也能切换主题。
3. initTheme() 的立即调用： 在代码的最后，我们直接调用了 initTheme() 函数。这意味着当页面加载完成后，JavaScript代码会立即执行该函数，从而初始化主题。

注意事项

• 确保jQuery已加载： 代码中使用了 jQuery 的 addClass() 和 removeClass() 方法。请确保在执行这段 JavaScript 代码之前，jQuery 库已经正确加载。
• 代码放置位置： 建议将这段 JavaScript 代码放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器，以确保在 DOM 元素加载完成后再执行代码。

• CSS样式的优先级： 确保你的CSS样式具有足够的优先级，能够覆盖默认样式。 使用 !important 声明时需要谨慎，过度使用可能会导致样式管理混乱。

总结

通过定义一个初始化主题的函数，并在页面加载完成后立即调用该函数，可以有效地解决暗黑模式或其他主题模式在页面加载时失效的问题。 结合点击事件监听器，可以实现用户交互式的主题切换功能，提升用户体验。 确保JavaScript代码在DOM元素加载完成后执行，并注意CSS样式的优先级，是实现该方案的关键。

以上就是解决JavaScript暗黑模式页面加载时失效的问题的详细内容，更多请关注php中文网其它相关文章！