Easily change style & CSS source using Javascript

If you have several CSS file as your web theme, then you must allow your user to switch between one of them.

Here is the simple way using Javascript to switch CSS source:

<html>
	<head>
		<link rel="stylesheet" href="red.css"  id="red"/>
		<link rel="stylesheet" href="yellow.css" id="yellow"/>
		<script>
			function red(){
				document.getElementById('red').disabled = false;
				document.getElementById('yellow').disabled = true;
			}
			function yellow(){
				document.getElementById('red').disabled = true;
				document.getElementById('yellow').disabled = false;
			}
			function none(){
				document.getElementById('red').disabled = true;
				document.getElementById('yellow').disabled = true;
			}
			window.onload = none();
		</script>
	</head>
		<body>
		<p>Let's switch CSS!</p>
		<button type="button" onclick="red()">Red!</button>
		<button type="button" onclick="yellow()">Yellow!</button>
		<button type="button" onclick="none()">Default</button>
	</body>
</html>

Click here to see the demo page.

loading...