19
29 08 2007

CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

jQuery, Css

CSSを動的に切り替える方法をいくつか紹介します。全てcookieにより保存されます

　

1.styleswitch.jsを使う方法

まずGoogleで一番ヒットするのがstyleswitch.jsです。

コード

<script src="styleswitch.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="title2" href="css2.css" />
<!-- ▲head内 -->
<ul>
<li><a href="javascript:chooseStyle('none', 30)">Default</a></li>
<li><a href="javascript:chooseStyle('title1', 30)">Title1 style</a></li>
<li><a href="javascript:chooseStyle('title2', 30)">Title2 style</a></li>
</ul>

DEMO - DOWNLOAD
styleswitch.jsだけ必要なのでダウンロードして下さい。数字の30の部分はクッキー保持日数です。
実は今仕事で作成しているホームページにstyleswitch.jsを実装したのですが、他のjsライブラリと競合したのかIE6で表示が極端に遅くなってしまうという現象がおきたので他の方法を探す事にしました。

　

2.jquery.jsを使う方法

9/7日に汎用性を高めるためjquery.cookie.jsを使う仕様に変更しました。
JSライブラリJQueryを仕様しています。

コード

<link rel="stylesheet" href="css/style1.css" type="text/css" id="jstyle" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#jstyle").attr({href:$.cookie('style')});
});
function jstyle(cssurl){
$('#jstyle').attr({href:cssurl});
$.cookie('style',cssurl,{expires:30,path:'/'});
}
// -->
</script>
<!--▲head内-->
<ul>
<li onclick="jstyle('css/style1.css')">Style1</li>
<li onclick="jstyle('css/style2.css')">Style2</li>
<li onclick="jstyle('css/style3.css')">Style3</li>
</ul>

DEMO - DOWNLOAD
最もお勧めの方法です。
jquery.cookie.jsはjquery.jsでクッキーの扱いがとても簡単になります 詳細

　

3.CookieManager.jsを使う方法

CookieManagerを使った切り替え。prototypeを利用している方にお勧めです。javascriptでcssを切り替えてcookieに保存するで紹介されています。

コード

<link rel="stylesheet" type="text/css" href="css1.css" id="style">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="cookiemanager.js"></script>
<script type="text/javascript">
<!--
manager = new CookieManager();
setcss = manager.getCookie("cssname");
if(setcss != null){
document.getElementById("style").href = setcss;
}
function styleChange(type){
document.getElementById("style").href = type;
manager.setCookie("cssname", type);
}
//-->
</script>
<!-- ▲head内 -->
<ul>
<li><a href="#" onClick="styleChange('css1.css');">スタイル1</a></li>
<li><a href="#" onClick="styleChange('css2.css');">スタイル2</a></li>
</ul>

DEMO - DOWNLOAD
他にもprototype.jsが必要です。CookieManagerはライブラリとしても便利そうです。

　

【番外】 iGoogleのように時間によって切り替える

sunset

コード

<SCRIPT LANGUAGE="JavaScript">
<!-- 
function getCSS()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours();

 if (thehour > 20)
  display = "tree_twilight.css";
   else if (thehour > 17)
  display = "tree_sunset.css";
 else if (thehour > 14)
  display = "tree_afternoon.css";
 else if (thehour > 11)
  display = "tree_noon.css";
 else if (thehour > 7)
  display = "tree_morning.css";
 else if (thehour > 4)
  display = "tree_sunrise.css";
 else if (thehour > 1)
  display = "tree_twilight.css";
 else
  display = "tree_sunset.css";
 var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';
 document.write(css);
// End -->
}
</script>
<!-- ▲head内 -->
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

時間によってjavascriptでCSSを切り替えて朝～夜にかけて太陽や月を表示させたり出来ます。
Katgal.comで紹介されていました。

This entry was posted on 水曜日, 8月 29th, 2007 at 12:19:38 and is filed under jQuery, Css.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie”

  1. #1 JavaScriptとCSSで任意にフォントサイズを切り替える方法 | メモ　バインダー says:
    4月 20th, 2009 at 19:07:42

    […] 他にも様々な方法を紹介しているサイトはこちら CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie […]

この記事にコメントする