### 解决JavaScript暗黑模式页面加载时失效的问题正如摘要所述，本教程旨在解决WordPress网站暗黑模式在页面加载时失效的问题。通常，JavaScript代码在页面加载完成后才会执行，导致一些需要在页面初次渲染时生效的功能，如暗黑模式的初始化，出现延迟或失效的情况。以下是一种解决该问题的方案，通过定义一个初始化主题的函数，并在页面加载完成后立即调用该函数，确保暗黑模式或其他主题模式在页面初次渲染时即可生效。#### 解决方案：定义并立即执行初始化函数问题在于，原代码仅在点击事件触发时才执行主题切换逻辑。为了在页面加载时也执行该逻辑，我们需要将其封装成一个函数，并在页面加载完成后立即调用。“`javascriptlet 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暗黑模式页面加载时失效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527023.html
微信扫一扫 
支付宝扫一扫 
