High Styling

This page shows how to allow the user to switch between CSS style sheets with a mouse click. Click on the links below to see how it works:

Link in multiple files and five them a title attribute:

<link href="../../libs/css/style3.css"
    title="style3" />

Create links in your document that look like this:

<a href="#" onclick="setStyleSheet('style1');">style1</a>

Here is the JavaScript used to drive this feature:

function setStyleSheet(title)
    var sheetName;
    var count = 0;

    if (!title) return;
    var tags = document.getElementsByTagName('link');

    while (sheetName = tags[count])
        var styleIndex = sheetName.getAttribute('rel').indexOf('style');
        if( styleIndex != -1 && sheetName.getAttribute('title') )
            sheetName.disabled = true;
            if(sheetName.getAttribute('title') == title)
                sheetName.disabled = false;

The driving force here is the title attribute on your link tag. This title is sent to the JavaScript function. It looks for a link tag that has this title. If it finds it, it activates it.