mootools

References to Documentation

1. Element/Element-Event.js#Element.addEvent
2. Native/Element.js#Element.remove
3. Remote/Assets.js#css
4. Native/Element.js#Element.setHTML

var path = 'http://demos.mootools.net/demos/Asset.css/';
var style_1, style_2, style_base;
 
/* Style 1 */
$('s1').addEvent('click', function(e) {
	e = new Event(e).stop();
 
	if (style_1) style_1.remove();
	new Asset.css(path + 'style1.css', {id: 'style1'});
	style_1 = $('style1');
 
	$('log').setHTML('<a href="' + path + 'style1.css">style1.css<\/a><\/span>');
});
 
/* Style 2 */
$('s2').addEvent('click', function(e) {
	e = new Event(e).stop();
 
	if (style_2) style_2.remove();
	new Asset.css(path + 'style2.css', {id: 'style2'});
	style_2 = $('style2');
 
	$('log').setHTML('<a href="' + path + 'style2.css">style2.css<\/a><\/span>');
});
 
/* Style Base */
$('s_base').addEvent('click', function(e) {
	e = new Event(e).stop();
 
	if (style_base) style_base.remove();
	new Asset.css(path + 'style_base.css', {id: 'style_base'});
	style_base = $('style_base');
 
	$('log').setHTML('<a href="' + path + 'style_base.css">style_base.css<\/a><\/span>');
});

<h3>Asset.CSS</h3>
<div id="assetDemo">
	<p><a id="s_base" href="#">Style Base</a> | <a id="s1" href="#">Style 1</a> | <a id="s2" href="#">Style 2</a></p>
 
	<br />
 
	<p>Current css file loaded: <span id="log"><a href="demos.mootools.net/Asset.css/style_base.css">style_base.css</a></span></p>
 
	<br />
 
	<div id="box">
		<p>&quot;moo, moo&quot; said the cow tersely.</p>
		<p>So all the people yelled: &quot;tools! moo-tools!&quot;</p>
	</div>
</div>

.center {
	margin: 0pt auto;
}
 
#box {
	margin: 10px auto;
	width: 150px;
	height: 95px;
	padding: 10px;
	background: #fff;
	border: 1px solid #000;
}