Dynamically Load Stylesheets Using MooTools 1.2

Step 1: The XHTML

<p>
<a rel="css/black.css" class="load-css" href="?theme=black">Load Black Stylesheet</a><br><br>
<a rel="css/red.css" class="load-css" href="?theme=red">Load Red Stylesheet</a><br><br>
<a rel="css/blue.css" class="load-css" href="?theme=blue">Load Blue Stylesheet</a>
</p>

Step 2: The CSS

/* black.css */
body { background:#000; color:#fff; }
a    { color:#ccc; }


/* blue.css */
body { background:#00f; color:#fff; }
a   { color:#fff; }


/* red.css */
body   { background:#f00; color:#fff; }
a      { color:#fff; }

Step 3: The MooTools JavaScript

window.addEvent('domready', function () {
			$$('.load-css').each(function(el) {
				el.addEvent('click', function(e) {
					e = new Event(e).stop();
					var css = new Asset.css(el.get('rel'), { });
				});
			});
		});

Example

Click Here to DEMO