Skip to content

ThirteeNov

My personal blog about coding and internet

Menu
  • About me
  • About Zofia Kreasi
  • Cart
  • Checkout
  • Making an airplane game from scratch in Unity
  • My account
  • Privacy Policy
  • Privacy Policy – zkLeaderboard
  • Sample Page
  • Shop
  • Tutorials on Learning JavaScript
  • ZKAccounts – Privacy Policy
Menu

Easily change style & CSS source using Javascript

Posted on December 12, 2016August 4, 2020 by Habibie

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.

Post Views: 224
ciihuy2020

Welcome!

  • My YouTube Channel
  • My GitHub Page
  • About me

Categories

  • 3DVista
  • Android
  • Apache
  • C#
  • Cordova
  • Electron & Node JS
  • HTML5, CSS & JavaScript
  • iOS
  • Let's Make Unity Games
  • Misc
  • Photoshop
  • PHP
  • Python
  • Uncategorized
  • Unity
  • WordPress

Recent Posts

  • Make objects like wires and cables easily in Unity using Ciihuy Curved Mesh
  • [SOLVED] Can’t Add Custom Domain to Blogger After Losing CNAME Verification
  • iOS App Icon Generator by CiihuyCom
  • Advanced Blinking Marker Script to show objects position in your game canvas
  • Ciihuy Images Merger – Fast & Easy Online Image Combiner
© 2025 ThirteeNov | Powered by Superbs Personal Blog theme