This article was prompted by a question from one of my evening class students: rather than the user clicking on links and letting PHP dynamically load a new stylesheet to respond to user preferences, was it possible to preview site styles on hover, without touching PHP?

The answer is yes: as we’ve seen, JavaScript can dynamically alter the CSS of any element; this goes all the way up to loading a new stylesheet for the entire document. (In the example used for this article, I’ve restricted the CSS changes to just the header.)

Why would you want to do such a thing? For several reasons: the obvious purpose is to let users see a series of themes for a web site without needing to click or reload. Another possibility is a desire to change the CSS for the page on the fly, without needing any user interaction at all. (For example, changing the theme of the site based on the time or season).

The setup is pretty simple. First, we need to make the stylesheets: theme1.css, theme2.css and theme3.css. In each stylesheet,write the CSS that you want to apply for that theme. I would also write a base.css stylesheet that would contain styles that were consistent between all the pages for the entire site, such as reset rules.

And our CSS; theme1.css, in this case:

body {
	background-image: url(moonrise.jpg);
	}
/* the rest of the unique CSS for this theme goes here */

We’ll also make theme2.css and theme3.css.

In the markup I’ll use three links that, when clicked, will set the user’s theme preference for the site via the PHP method I have written about earlier:

<a href="themeset.php?theme=1" id="theme1">1</a>
<a href="themeset.php?theme=2" id="theme2">2</a>
<a href="themeset.php?theme=3" id="theme3">3</a>

These links will also initiate the stylesheet preview when they are hovered over. All of the id values of our links begin with "theme". So we can use the JavaScript "starts with" query attribute selector:

document.querySelectorAll('a[id^="theme"]').eventListener("hover", (function () { })

Each link has the same value for id as the name of the stylesheet that it matches. So we can concatenate the id value of the link with the required text to get our stylesheet file name:

$('head').append('<link rel=stylesheet href='+$(this).attr("id")+'.css>');

The new script in its entirety:

$(document).ready(function () {
	$('a[id^="theme"]').hover(function () {
		$('head').append('<link rel=stylesheet href='+$(this).attr("id")+'.css>');
	});
});

Photographs supplied by Spreng Ben, HessieBell and Tom Raftery, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.