JavaScript での外部CSS切り替え方法(複数版)

追記(2012年03月08日)

JavaScript の変更と、それに合わせて記事内の追記が増えたので、サンプルコードを書き直してみました。

前に記述した「JavaScript で外部CSS (スタイルシート) を切り替えてみた」の記事では、あくまで2種類しかスタイルシートが無い場合だったのですが、今回のコードは3種類以上に切り替えるためのものです。

行っていることは、前と同様に外部CSSのURLを書き換えて、スタイルシートを切り替えつつ Cookie を設定・削除を行うのですが、今回はページの読み込み時に Cookie をJSON形式で取得し、その変数を使ってスタイルシートを切り替えるように変更しました。

あと、document.write を使用しないようにしているのですが、onload 時に後から表示されるのはうっとうしいということで、select 要素は html 内に記述し、中の option 要素を後から書き換えるようにしています。

スタイル切り替え用の JavaScript コード

サンプルとして、CSSというフォルダ内に style.css (通常時), white.css (代替1) , black.css (代替2) がある場合。

HTML
head への記述
  • <link rel="stylesheet" href="css/style.css" type="text/css" id="color" />
body への記述
  • <select id="c_color" title="配色の変更" tabindex="1">
    • <option selected="selected">Loading...</option>
  • </select>

JavaScript
js ファイル読み込み時
  • var color = document.getElementById('color') , ck;
  • if(document.cookie!=''){
    • ck = eval('({' + document.cookie.replace(/=([^;]+)/g,function(){return ':"' + arguments[1] + '"'}).replace(/;/g,',') + '})');
    • if(ck.color!=undefined){
      • color.href = color.href.replace(/css\/.*\.css$/, 'css/' + ck.color + '.css');
    • }
  • }else{
    • ck = {color:'style'};
  • }
onload 時
  • add_listener(window,'load',function(){
    • var c = document.getElementById('c_color') , option = [];
    • var c_css = [
      • ['style', '通常時'],
      • ['white', '代替1'],
      • ['black', '代替2'],
    • ];
    • c.innerHTML = '';
    • c.tabIndex = c_css.length;
    • for(i=0;i<c_css.length;i++){
      • option[i] = document.createElement('option');
      • option[i].value = c_css[i][0];
      • option[i].innerHTML = c_css[i][1];
      • option[i].selected = (ck.color == c_css[i][0] ? 'selected' : '');
      • c.appendChild(option[i]);
    • }
    • add_listener(c,'change',function(){change_color.call(this,c.value)});
  • });
CSS切り替え用関数
  • function change_color(a) {
    • color.href = color.href.replace(ck.color + '.css', a + '.css');
    • if(document.cookie.match(/color=/ + ck.color)){
      • document.cookie = 'color=' + ck.color + ';max-age=0;expires=Thu, 1-Jan-1900 00:00:00 GMT;path=/';
      • ck.color = a;
    • }
    • document.cookie = 'color=' + a + ';max-age=604800;path=/';
  • }
イベントリスナー用関数
  • function add_listener(a,b,c){
    • if(a.addEventListener){
      • a.addEventListener(b,c,false);
    • }else if(a.attachEvent){
      • a.attachEvent('on' + b,c);
    • }else{
      • a['on'+b]=c;
    • }
  • }

さらにスタイルシートを増やす場合は、onload 時に作成する配列 c_css の値に以下の形で追加してください。
['拡張子を抜いたCSSファイル名','表示する文字列']

後書き

前は、ページの読み込み時に for文で Cookie をチェックして切り替えていたんですが、変更するスタイルシートが増えれば増えるほど処理数が増えてしまうので、Cookie に入っている値を切り替えるCSSのファイル名に置き換えるように変更しました。

取得の方法は、URLパラメータを取得の時に行ったものと同じくJSON形式に変換していますが、ブラウザとページ内のコンテンツによって document.cookie の中身が異なるので、少し複雑になっています。

上記のコードは実際に利用しているものとは少し違い、CSS切り替え時にブラウザによっては一瞬何も適用されていない状態になるので、気になる場合は下記のページを参考に関数 change_color の中を変更してみてください。

関連ページ : link要素からイベントを受け取ることができるか確認してみた

スポンサードリンク

inserted by FC2 system