CSS を、Javascript，Cookie を使用し切り替える方法

CSS 切り替え方法

1. styleswitch.js 使用

   【head 内】

   <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="pattern1" href="css1.css" />
   <link rel="alternate stylesheet" type="text/css" media="screen" title="pattern2" href="css2.css" />

   【body 内 切り替え用ソース】

   <ul>
   <li><a href="javascript:chooseStyle('none', 30)">CSSdefault</a></li>
   <li><a href="javascript:chooseStyle('title1', 30)">CSSpattern1</a></li>
   <li><a href="javascript:chooseStyle('title2', 30)">CSSpattern2</a></li>
   </ul>

   ※ 赤字の部分は Cookie 保存日数（この場合 30 日）

2. jquery.js と jquery.cookie.js 使用

   【head 内】

   <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>

   【body 内 切り替え用ソース】

   <ul>
   <li onclick="jstyle('css/style1.css')">CSSpattern1</li>
   <li onclick="jstyle('css/style2.css')">CSSpattern2</li>
   <li onclick="jstyle('css/style3.css')">CSSpattern3</li>
   </ul>

3. CookieManager.js と prototype.js 使用

   【head 内】

   <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>

   【body 内 切り替え用ソース】

   <ul>
   <li><a href="#" onclick="styleChange('css1.css');">CSSpattern1</a></li>
   <li><a href="#" onclick="styleChange('css2.css');">CSSpattern2</a></li>
   </ul>