JavaScript + Ajax 実践サンプル集 - スタイルシートを切り替える

スタイルシートを切り替える

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのstyleSwitch()プラグインを利用して外部ファイルに格納されているスタイルシートを切り替えます。[styles1-3]をクリックすると対応するスタイルシートに切り替えます。カレントのスタイルシートは「Currently active stylesheet」に表示されます。

このサンプルを編集して試してみる ←サンプルが背後に隠れて見えないときは左をクリック！

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/

$(document).ready(function() {
	$('.styleswitch').click(function()
	{
		switchStylestyle(this.getAttribute("rel"));
		return false;
	});
	var c = readCookie('style');
	if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
	$('link[@rel*=style][@title]').each(function(i) 
	{
		this.disabled = true;
		if (this.getAttribute('title') == styleName) this.disabled = false;
	});
	createCookie('style', styleName, 365);
}

// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,"",-1);
}
// /cookie functions

このサンプルを編集して試してみる!

linkタグにはrel,title属性を指定します。style2とstyle3のrel属性には「alternate stylesheet」を指定します。

<link href="jQuery/styleSwitch/styles1.css" 
  rel="stylesheet" title="styles1" type="text/css" />
<link href="jQuery/styleSwitch/styles2.css" 
  rel="alternate stylesheet" title="styles2" type="text/css" />
<link href="jQuery/styleSwitch/styles3.css" 
  rel="alternate stylesheet" title="styles3" type="text/css" />

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

スタイルシートを切り替える

JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

スタイルシートを切り替える

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...