クッキーでスタイルシートを変える方法

ホーム > JavaScript > クッキーでスタイルシートを変える方法

■説明

　ユーザにスタイルシートをしてもらい、それをクッキーで保存することでユーザ毎にスタイルシートを設定することが出来ます。各々のユーザの好みに合ったスタイルシートファイルを作成しておけば、ユーザにとってサイトはますます見やすくなるでしょう。　実行例では、スタイルシートをフォームにより設定してもらっていますが、トップページにだけおき、その他のページには、スクリプトの部分のみを入れておけば、トップページで変更のあったスタイルシートが適用されます。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<TITLE>クッキーでスタイルシートを変える方法</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者:るび～  ACCESS R  http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――
//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここから！！
//――――――――――――――――――――――――――――――――――――――
var cssfile = new Array();
cssfile[0] = "../../css/style_win.css";	//デフォルトのスタイルシートファイル
cssfile[1] = "../../css/basic_001.css";	//その他のスタイルシートファイル
cssfile[2] = "../../css/basic_002.css";	//その他のスタイルシートファイル
cssfile[3] = "../../css/basic_003.css";	//その他のスタイルシートファイル
//――――――――――――――――――――――――――――――――――――――
// ユーザが設定する部分はここまで！！
//――――――――――――――――――――――――――――――――――――――
var css = GetCookie("CSS");
if(css == ""){css = cssfile[0];}
document.write('<LINK REL="stylesheet" HREF="' + css + '" TYPE="text/css">');

function SetCss(sel){
	if(sel.options[sel.selectedIndex].value){
		SetCookie("CSS", cssfile[sel.options[sel.selectedIndex].value - 1]);
		window.location.reload();
	}
}

function GetCookie(key){
	var tmp = document.cookie + ";";
	var index1 = tmp.indexOf(key, 0);
	if(index1 != -1){
		tmp = tmp.substring(index1, tmp.length);
		var index2 = tmp.indexOf("=", 0) + 1;
		var index3 = tmp.indexOf(";", index2);
		return(unescape(tmp.substring(index2,index3)));
	}
	return("");
}

function SetCookie(key, val){
	document.cookie = key + "=" + escape(val) + ";expires=Fri, 31-Dec-2030 23:59:59;";
}
//-->
</SCRIPT>
<NOSCRIPT>
<LINK REL="stylesheet" HREF="../../css/style_win.css" TYPE="text/css">
</NOSCRIPT>
</HEAD>
<BODY>

<FORM NAME="form1">
<SELECT NAME="select1">
<OPTION VALUE="1">CSS(デフォルト)</OPTION>
<OPTION VALUE="2">CSS(背景色･･･(1))</OPTION>
<OPTION VALUE="3">CSS(背景色･･･(2))</OPTION>
<OPTION VALUE="4">CSS(背景色･･･(3))</OPTION>
<INPUT TYPE="button" VALUE="スタイル変更" onClick="SetCss(document.form1.select1)">
</SELECT>
</FORM>

</BODY>
</HTML>

■実行例

■対応ブラウザ

クッキーでスタイルシートを変える方法
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
●	●	●	●	●	●	●	●	●	●

[ホーム] [JavaScript] [↑ページ最上部へ戻る]

インターネット上であなたのパソコン教室を開きませんか？
自宅でパソコン教室を簡単に開くことが出来ます。そして低リスクで効率よく稼げる仕事をさがしている。そんな方にはオススメです。