主题未在页面加载时加载，但适用于单选按钮选择

Question

我纯粹是一个初学者，这是我一个专业的项目。我正在尝试使用 JavaScript 在我的一个子页面 (

Article1.html

) 上实现主题切换功能，用户可以通过弹出菜单中的单选按钮选择主题（Dark Modern、Pink Pastel、Windows XP）。如果之前已保存，则主题应在页面加载时立即加载，但仅在从菜单中选择主题后才加载。当我打开index.html（父页面/主页）时，我看不到任何CSS，它只是普通的html。

这是我所拥有的：

1. JavaScript 函数 (

   setTheme

   )，可根据所选主题更改 CSS 文件和标题图像。
2. 选择主题时调用

   setTheme

   并将选择保存到

   localStorage

   的单选按钮侦听器。
3. 页面加载功能，从

   localStorage

   检索保存的主题并通过

   setTheme

   应用它，我希望在加载时立即应用主题。

我感谢任何帮助。谢谢你。

HTML 代码：

<!--Control Panel-->
        <div class="controlPanel">
            <button class="arrangement" onclick="openMenu('arrangementMenu')">Arrangement</button>
            <button class="order" onclick="openMenu('orderMenu')">Order</button>
            <button class="themes" onclick="openMenu('themesMenu')">Themes</button>
        </div> <!--controlPanel-->

        <!-- Overlay -->
        <div class="overlay" id="overlay" onclick="closeMenu()"></div>

                <!-- Arrangement Menu -->
                <div id="arrangementMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Arrangement</h3>
                    <hr>
                    <div class="notAvailable">
                        <p>This feature is not available for this page.</p>
                        <p>Go <a href="../index.html">back to home.</a></p> 
                    </div>
                </div> <!-- arrangementMenu -->

                <div id="orderMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Order</h3>
                    <hr>
                    <div class="notAvailable">
                        <p>This feature is not available for this page.</p>
                        <p>Go <a href="../index.html">back to home.</a></p>
                    </div>
                </div>
                <!-- orderMenu -->
                
                <!-- Themes Menu -->
                <div id="themesMenu" class="popupMenu">
                    <button class="closeBtn" onclick="closeMenu()">X</button>
                    <h3>Theme:</h3>
                    <hr>
                    <div class="radio-group">
                        <label><input type="radio" name="theme" value="astyle - dark modern.css" onclick="setTheme('astyle - dark modern.css')">Dark Modern</label>
                        <hr>
                        <label><input type="radio" name="theme" value="astyle - pink pastel.css" onclick="setTheme('astyle - pink pastel.css')">Pink Pastel</label>
                        <hr>
                        <label><input type="radio" name="theme" value="astyle - windows xp.css" onclick="setTheme('astyle - windows xp.css')">Windows XP</label>
                    </div>
                    <button onclick="saveTheme()" class="closeBtn">OK</button>
                </div> <!-- themesMenu -->

Javascript 代码：

// Function to open a menu
function openMenu(menuId) {
    console.log("Opening menu:", menuId);
    document.getElementById("overlay").style.display = "block";
    document.querySelectorAll(".popupMenu").forEach(menu => {
        menu.style.display = "none";
    });
    // Takes the ID of menu and plugs in to this getElementById
    document.getElementById(menuId).style.display = "block";
}

// Function to close a menu
function closeMenu() {
    document.getElementById("overlay").style.display = "none";
    document.querySelectorAll(".popupMenu").forEach(menu => {
        menu.style.display = "none";
    });
}

// Function to switch themes based on radio button selection and save to local storage
function setTheme(sheet) {
    var stylesheet = document.getElementById('articleTheme');
    stylesheet.setAttribute('href', sheet);
    localStorage.setItem('cssTemplate', sheet);

    var header = document.getElementById("header");
    
    if (sheet === "astyle - dark modern.css") {
        header.src = "../images/dark modern header.png";
    } else if (sheet === "astyle - pink pastel.css") {
        header.src = "../images/pink pastel header.gif";
    } else if (sheet === "astyle - windows xp.css") {
        header.src = "../images/windows xp header.gif";
    }    
}

window.addEventListener("load", function() {
    var themeStyle = localStorage.getItem('cssTemplate') || 'astyle - dark modern.css';
    setTheme(themeStyle);
});

Answer 1

为了帮助您和您的问题，我创建了这个codesandbox示例https://codesandbox.io/p/sandbox/7dx7hz?file=%2Findex.html%3A45%2C11。看看这是否是您正在寻找的。

您没有发布您的 css，因此只有 html 元素和 3 个 css 文件来代表您的主题。