如何通过onchange事件实现CSS样式文件的动态热切换？

Hey there! The issue you're facing makes total sense—toggling individual styles like backgroundColor works for quick tweaks, but when you want to switch entire design systems (with consistent colors, typography, spacing, etc.), you need a way to swap full CSS stylesheets seamlessly. Let's walk through a couple of solid solutions using your existing code setup.

Solution 1: Toggle Preloaded Stylesheets (Fast Switching) #

If you want to keep all theme stylesheets loaded upfront (for instant switching), you can control their disabled attribute to activate/deactivate them.

Step 1: Update Your HTML #

First, set your default theme as active, and mark the others as disabled initially:

<label>Themes :</label>
<select name="background" id="bg" onchange="changeTheme(this)">
    <option value="theme1">Default</option>
    <option value="theme2">Dark</option>
    <option value="theme3">Teal</option>
</select>

<!-- Themes: Default is active, others are disabled -->
<link type="text/css" rel="stylesheet" media="all" href="style.css" id="theme1_css">
<link type="text/css" rel="stylesheet" media="all" href="themes/dark.css" id="theme2_css" disabled>
<link type="text/css" rel="stylesheet" media="all" href="themes/teal.css" id="theme3_css" disabled>

Step 2: Write the Theme Switching Function #

Replace your changeBg function with this one, which toggles the disabled state of each stylesheet:

function changeTheme(selectElement) {
    // Get all theme stylesheets (matches elements with IDs starting with "theme")
    const allThemes = document.querySelectorAll('[id^="theme"]_css');
    // Get the ID of the selected theme's stylesheet
    const selectedThemeId = `${selectElement.value}_css`;

    // Loop through all stylesheets: enable the selected one, disable the rest
    allThemes.forEach(stylesheet => {
        stylesheet.disabled = stylesheet.id !== selectedThemeId;
    });
}

Pros: Instant theme switching (no network request after initial load).
Cons: Slightly larger initial page load since all stylesheets are loaded upfront.

Solution 2: Dynamically Update a Single Stylesheet (Light Initial Load) #

If you prefer to load only the active theme's stylesheet initially (to save bandwidth), you can reuse a single <link> tag and update its href attribute when switching themes.

Step 1: Simplify Your HTML #

Keep just one stylesheet link for the theme, and update your dropdown values to match the CSS file paths:

<label>Themes :</label>
<select name="background" id="bg" onchange="changeTheme(this)">
    <option value="style.css">Default</option>
    <option value="themes/dark.css">Dark</option>
    <option value="themes/teal.css">Teal</option>
</select>

<!-- Single theme link (loads default initially) -->
<link type="text/css" rel="stylesheet" media="all" href="style.css" id="main_theme">

Step 2: Write the Dynamic Switching Function #

This function updates the href of your main theme link to the selected CSS file:

function changeTheme(selectElement) {
    const mainThemeLink = document.getElementById('main_theme');
    // Update the stylesheet URL to the selected theme
    mainThemeLink.href = selectElement.value;
}

Pros: Smaller initial page load (only one stylesheet loaded first).
Cons: First switch to a new theme may have a slight delay (unless the file is cached by the browser).

Bonus: Save User's Theme Preference #

To make the theme stick after page reloads, use localStorage to store the user's selection:

function changeTheme(selectElement) {
    const mainThemeLink = document.getElementById('main_theme');
    const selectedTheme = selectElement.value;
    
    // Update the stylesheet
    mainThemeLink.href = selectedTheme;
    // Save the selection to localStorage
    localStorage.setItem('userPreferredTheme', selectedTheme);
}

// Apply saved theme on page load
window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('userPreferredTheme');
    if (savedTheme) {
        const mainThemeLink = document.getElementById('main_theme');
        const selectElement = document.getElementById('bg');
        
        // Restore the theme and update the dropdown
        mainThemeLink.href = savedTheme;
        selectElement.value = savedTheme;
    }
});

This way, users will see their chosen theme every time they visit your site!

内容的提问来源于stack exchange，提问作者Muhammad Jafar