### 解决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();
代码解释：
-
initTheme() 函数： 该函数包含了原代码中用于判断用户系统主题模式并切换页面主题的逻辑。
-
点击事件监听器： 保留了原有的点击事件监听器，确保用户点击按钮时也能切换主题。
-
initTheme() 的立即调用： 在代码的最后，我们直接调用了 initTheme() 函数。这意味着当页面加载完成后，JavaScript代码会立即执行该函数，从而初始化主题。
注意事项
-
确保jQuery已加载： 代码中使用了 jQuery 的 addClass() 和 removeClass() 方法。请确保在执行这段 JavaScript 代码之前，jQuery 库已经正确加载。
-
代码放置位置： 建议将这段 JavaScript 代码放在
以上就是解决JavaScript暗黑模式页面加载时失效的问题的详细内容，更多请关注php中文网其它相关文章！
广告
457
收藏
