Alternative StyleSheets

by Charlie Calvert for Prog109

Define two stylesheets, using the rel attribute to mark one as alternate

            
<link href="../styles/basic.css" rel="alternate stylesheet" type="text/css" id="basic">
<link href="../styles/styles.css" rel="stylesheet" type="text/css" id="default">
            
        

Now styles.css will be the active stylesheet, and basic.css will sit in the background waiting to be activated. To activate it, simply switch which stylesheet is marked as the alternate.

            
<link href="../styles/basic.css" rel="stylesheet" type="text/css" id="basic">
<link href="../styles/styles.css" rel="alternate stylesheet" type="text/css" id="default">
            
        

We can, of course, use JavaScript to perform this switch.

Create a button, and define an onclick method for it in a JavaScript file:


window.onload = () => {

    const appearanceButton = document.getElementById('appearanceAction');

    appearanceButton.onclick = () => {
        const defaults = document.getElementById('default');
        const basic = document.getElementById('basic');

        disableStylesheet(defaults);
        enableStylesheet(basic);
    }

}

function enableStylesheet (node) {
    node.rel = 'stylesheet';
    }
    
function disableStylesheet (node) {
    node.rel = 'alternate stylesheet';
}                
        
    

When the user clicks on the button, the default (style.css) stylesheet will be deactivated and the basic stylesheet will be activated.

Note: Don't name a variable default. It is a reserved word. A simple workaround would be to call it defaults. This is what I have done in the code shown above.


        const defaults = document...