sters/change_class.html

## change_class.html
<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>スタイルシートそのものを変更する</title>

		<link rel="stylesheet" type="text/css" href="style-a.css" id="style-a" disabled="true">
		<link rel="stylesheet" type="text/css" href="style-b.css" id="style-b" disabled="true">
		<style id="style-c">
			#foo {
				background-color: #999;
			}
		</style>

		<script>
			function change(id, enable){
				//チェックボックスでチェックをいれたスタイルを有効にする
				document.getElementById(id).disabled = !enable;
			}
			window.addEventListener('load', function () {
				//初期化処理としてすべてのスタイルを無効にする
				var styles = document.styleSheets;
				for (var i = 0; i < styles.length; i++) {
					styles[i].disabled = true;
				}
			}, false);
		</script>
	</head>
	<body>
		<div id="foo">This is sample.</div>
		<input type="checkbox" onchange="change('style-a', this.checked)">
		<input type="checkbox" onchange="change('style-b', this.checked)">
		<input type="checkbox" onchange="change('style-c', this.checked)">
	</body>
</html>

<!--
/* style-a.cssの中身 */
#foo {
	font-size: x-large;
}

/* style-b.cssの中身 */
#foo {
	text-decoration: underline;
}
 -->
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>スタイルシートそのものを変更する</title>

	<link rel="stylesheet" type="text/css" href="style-a.css" id="style-a" disabled="true">
	<link rel="stylesheet" type="text/css" href="style-b.css" id="style-b" disabled="true">
	<style id="style-c">
	#foo {
	background-color: #999;
	}
	</style>

	<script>
	function change(id, enable){
	//チェックボックスでチェックをいれたスタイルを有効にする
	document.getElementById(id).disabled = !enable;
	}
	window.addEventListener('load', function () {
	//初期化処理としてすべてのスタイルを無効にする
	var styles = document.styleSheets;
	for (var i = 0; i < styles.length; i++) {
	styles[i].disabled = true;
	}
	}, false);
	</script>
	</head>
	<body>
	<div id="foo">This is sample.</div>
	<input type="checkbox" onchange="change('style-a', this.checked)">
	<input type="checkbox" onchange="change('style-b', this.checked)">
	<input type="checkbox" onchange="change('style-c', this.checked)">
	</body>
	</html>

	<!--
	/* style-a.cssの中身 */
	#foo {
	font-size: x-large;
	}

	/* style-b.cssの中身 */
	#foo {
	text-decoration: underline;
	}
	-->