css/cssの切替

概要 †

• ボタンやプルダウンリストでスタイルを切替え、ページを移動しても切替えられたスタイルを保持させる。スタイルの保持には、cookieを利用する。
  参考:小粋空間 CSS JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）

javascriptでのcookieの生成と読込み †

• 以下の関数を用意しておいて、cookieに焼きたいとき、cookieを読み込みたいときに利用する

生成 †

nameにcookieの名前、valueにcookieの値、daysにcookieの有効期限を設定できる。

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 expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

読込み †

nameに読み込みたいcookieの名前を入れて呼び出す。

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

cssを切り替える †

selectやbuttonで読み込ませるスタイルを切り替える †

切替方法概要 †

• headタグ内のリンク要素のリンク先を書き換えて、読み込むcssファイルを切替える。 例：

  <link type="text/css" rel="stylesheet" href="./css/style.css"/>

  を

  <link type="text/css" rel="stylesheet" href="./css/style2.css"/>

  に書き換える。

selectで切り替える場合 †

selectのoptionの値にcssのディレクトリを入れておき、onchangeでhead内のスタイルシートのリンク先を差し替える。
同時にcookieを書き換える。

• javascript
  

  function cssChange(){
     var n = document.form0.select.selectedIndex;     選択された項目を取得
     var slctdcss = document.form0.select.options[n].value;     選択された項目の値を取得
     document.getElementById('variableStyle').href= slctdcss;     取得した値（cssファイルのディレクトリ）をリンク先に渡す
     createCookie('storedstyle',slctdcss,365);     取得した値をクッキーに保管
  }

  • プルダウンリストの値について
    ロード時に、現在のスタイルと同じ項目を選択済みの状態にする。
    cookieに残っている値と同じ項目を選択された状態にする。

    function saveSlct(){
       a = readCookie('storedstyle');     保管されているクッキーを読み込み
       if(a == "./css/style.css"){     1番目の項目の値と一致したら0を
       var n = 0;
       }
       else if(a == "./css/style2.css"){     2番目の項目の値と一致したら1を
       var n = 1;
       }
       else{
       var n = 2;
       }
       document.form0.select.options.selectedIndex = n;     選択済項目の値に入れる
    }

    HTML読込み時に実行させる

    <script type="text/javascript">
    window.onload=function(){
    saveSlct();
    }
    </script>

• html

  <select name="select" onchange="cssChange();">
  	<option value="./css/style.css">flat</option>
  	<option value="./css/style2.css">luster</option>
  	<option value="">css off</option>
  </select>

buttonで切り替える場合 †

引数にcssのディレクトリを入れておき、onclickでhead内のスタイルシートのリンク先を差し替える。
同時にcookieを書き換える。

• javascript

  function cssChangeBtn(slctdcss){
     document.getElementById('variableStyle').href= slctdcss;
     createCookie('storedstyle',slctdcss,365);
  }

• html

  <input type="button" value="flat" onclick="cssChangeBtn('./css/style.css');">
  <input type="button" value="luster" onclick="cssChangeBtn('./css/style2.css');">
  <input type="button" value="css off" onclick="cssChangeBtn('');">

cookieに保存されているスタイルを書き出す †

HTMLのheadタグ内で、cssファイルを読み込む部分を書き換える。

<script type="text/javascript">
document.write('<link id="variablestyle" type="text/css" rel="stylesheet" href="'+ readCookie('storedstyle') +'"/>');
</script>

初回訪問時対策 †

仮のクッキーを生成する †

• javascript

  function CookieChk(){
  var sc = readCookie('storedstyle');     この名前のクッキーを呼び出してみて
   if( sc == null){                                もし値が入っていなかったら
   createCookie('storedstyle','./css/style.css',365);     クッキーを生成して
   location.reload();                                               リロードさせる
   }
  }

• html

  <script type="text/javascript">
  <!--
  window.onload=function(){
  CookieChk();
  }
  -->
  </script>