【JavaScript】読み込む外部CSSを動的に変える

JSで読み込む外部CSSを動的に変える

今回は、表示ボタンを押したときに入力するパスワードによって、
呼び出すCSSを変更して、表示する内容を変えるスクリプトを作ってみた。

■仕様■
・初期設定でBOXを非表示(display: none;)にしておく。
・「表示ボタン」を押したらダイアログを立ち上げ、パスワードを要求する。
・入力されたパスワードによって表示するCSSを変える。
 (パスワード「password01」→secret01.css、「password02」→secret02.cssを表示)
・display: none;→display: block;とする事で表示するBOXをコントロールする。
・パスワードが違う場合はダイアログ内に”パスワードが違います!” を表示する。

■処理の手順■
①表示ボタンが押されたら、passPrompt()関数が起動。
②入力できるダイアログを表示するprompt()が起動し、パスワードを要求。
③ダイアログのフォームに入力されたパスワードによって処理を変える。
④パスワードが一致したらcreateElement()、setAttribute()でlinkタグ、要素を生成する。
⑤getElementsByTagName()で指定要素内(headタグ)に子要素(linkタグ)を追加する。

【index.html】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptパスワードテスト</title>
<link rel="stylesheet" href="css/common.css" type="text/css">

<script language="JavaScript"><!--
function passPrompt() {	
	myPassWord = window.prompt("パスワードを入力してください","");
	if(myPassWord == "password01"){
		// linkタグと要素を生成
		var css=document.createElement("link");
		css.setAttribute("rel","stylesheet");
		css.setAttribute("type","text/css");
		css.setAttribute("href","css/secret01.css");
		// 指定要素内(headタグ)に子要素(linkタグ)を追加
		document.getElementsByTagName("head")[0].appendChild(css);
	}else if(myPassWord == "password02"){
		var css=document.createElement("link");
		css.setAttribute("rel","stylesheet");
		css.setAttribute("type","text/css");
		css.setAttribute("href","css/secret02.css");
		document.getElementsByTagName("head")[0].appendChild(css);
	}else{
		alert( "パスワードが違います!" );
	}
}
// --></script>

</head>
<body>
<div id="container">
	<p class="pw"><a onClick="passPrompt()">表示ボタン</a></p>
	<ul>
		<li class="secret00">通常BOX</li>
		<li class="secret01">秘密BOX01</li><!-- "password01"で表示 -->
		<li class="secret02">秘密BOX02</li><!-- "password02"で表示 -->
	</ul>
	<a href="index.html">←戻る</a>
</div>
</body>
</html>

【common.css】(レイアウト用)

*{
	margin: 0;
	padding: 0;
}

#container {
	width: 300px;
	text-align: center;
	margin: auto;
	padding: 10px;
}

p.pw a{
	display: block;
	width: 160px;
	height: 42px;
	line-height: 42px;
	margin: auto;
	color: #FFFFFF;
	background: #000000;
}

li{
	display: block;
	width: 160px;
	height: 42px;
	line-height: 42px;
	border: 1px solid #000000;
	margin: 3px auto;
}

li.secret01,
li.secret02 {
	display: none;
}

【secret01.css】(表示切り替え用)

li.secret01 {
	display: block;
}

【secret02.css】(表示切り替え用)

li.secret02 {
	display: block;
}

【実行結果】
読み込むCSSを動的に変えるJS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>