解决页面加载时 JavaScript 主题切换代码不生效的问题-js教程-PHP中文网

解决页面加载时 JavaScript 主题切换代码不生效的问题

心靈之曲

发布： 2025-10-06 11:18:24

原创

1006人浏览过

解决页面加载时 javascript 主题切换代码不生效的问题

本文旨在解决 WordPress 网站中 JavaScript 编写的主题切换功能在页面加载时未激活的问题。通过修改 JavaScript 代码，在页面加载时立即执行主题初始化函数，确保主题样式在初始状态下正确应用，从而避免页面加载后需要手动点击才能激活主题的困扰。

在开发具有主题切换功能的网站时，经常会遇到一个问题：JavaScript 代码在页面加载完成后才能生效，导致初始加载时主题样式不正确。以下提供一种解决方案，确保主题在页面加载时立即生效。

问题分析

问题的原因在于，原本的代码逻辑依赖于用户的点击事件来触发主题样式的应用。在页面首次加载时，没有任何点击事件发生，因此主题样式没有被初始化。

解决方案：初始化函数与立即执行

解决问题的关键在于创建一个初始化函数，并在页面加载时立即执行该函数。这样，无论用户是否点击，主题样式都会在页面加载时被正确应用。

立即学习“Java免费学习笔记（深入）”；

1. 创建初始化函数

将原先点击事件中的主题切换逻辑封装到一个名为 initTheme() 的函数中。该函数负责根据用户系统偏好设置（深色模式或浅色模式）来应用相应的主题样式。

Lumen5

一个在线视频创建平台，AI将博客文章转换成视频

105

查看详情

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 文件不会被缓存，否则修改后的代码可能不会立即生效。