本文旨在解决 WordPress 网站中 JavaScript 编写的主题切换功能在页面加载时未激活的问题。通过修改 JavaScript 代码，在页面加载时立即执行主题初始化函数，确保主题样式在初始状态下正确应用，从而避免页面加载后需要手动点击才能激活主题的困扰。
在开发具有主题切换功能的网站时，经常会遇到一个问题：JavaScript 代码在页面加载完成后才能生效，导致初始加载时主题样式不正确。以下提供一种解决方案，确保主题在页面加载时立即生效。
问题分析
问题的原因在于，原本的代码逻辑依赖于用户的点击事件来触发主题样式的应用。在页面首次加载时，没有任何点击事件发生，因此主题样式没有被初始化。
解决方案：初始化函数与立即执行
解决问题的关键在于创建一个初始化函数，并在页面加载时立即执行该函数。这样，无论用户是否点击，主题样式都会在页面加载时被正确应用。
立即学习“Java免费学习笔记（深入）”；
1. 创建初始化函数
将原先点击事件中的主题切换逻辑封装到一个名为 initTheme() 的函数中。该函数负责根据用户系统偏好设置（深色模式或浅色模式）来应用相应的主题样式。
function initTheme(){ const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; let bodyMode = document.querySelector("#pageMode"); if (UserMode) { $(bodyMode).addClass("bodyDark"); $(bodyMode).removeClass("bodyLight bodyHalfLit"); } else { $(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit"); }}
2. 修改点击事件监听器
修改点击事件监听器，使其在点击时调用 initTheme() 函数。
let SystemMode = document.querySelector(".pageSystemMode");SystemMode.addEventListener("click", function () { initTheme();});
3. 立即执行初始化函数
在代码的末尾，立即执行 initTheme() 函数。这将确保在页面加载完成后，主题样式立即被初始化。
initTheme();
完整代码示例：
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();});DarkMode.addEventListener("click", function () { $(bodyMode).addClass("bodyDark"); $(bodyMode).removeClass("bodyHalfLit");});HalfLitMode.addEventListener("click", function () { $(bodyMode).addClass("bodyHalfLit"); $(bodyMode).removeClass("bodyDark");});LightMode.addEventListener("click", function () { $(bodyMode).addClass("bodyLight"); $(bodyMode).removeClass("bodyDark bodyHalfLit");});initTheme();
注意事项
确保 jQuery 库已正确加载，因为代码中使用了 jQuery 的 addClass() 和 removeClass() 方法。#pageMode 元素必须存在于 HTML 中，并且 CSS 样式已正确定义，以确保主题样式能够正确应用。如果主题切换逻辑涉及更复杂的操作，例如存储用户偏好设置到 Cookie 或 Local Storage 中，则需要在 initTheme() 函数中进行相应的处理。如果网站使用了缓存机制，请确保 JavaScript 文件不会被缓存，否则修改后的代码可能不会立即生效。
总结
通过将主题切换逻辑封装到初始化函数中，并在页面加载时立即执行该函数，可以有效地解决 JavaScript 主题切换代码在页面加载时未生效的问题。这种方法简单易懂，并且可以适用于各种不同的主题切换场景。在实际开发中，可以根据具体需求对代码进行适当的调整和优化。
以上就是解决页面加载时 JavaScript 主题切换代码不生效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526929.html
微信扫一扫 
支付宝扫一扫 
