Charlie Calvert on Elvenware

Writing Code and Prose on Computers

Elvenware

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" 
	rel="stylesheet" 
	type="text/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;
			}
		}
		count++;
	}  
}

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.