JavaScript で外部CSSを切り替えてみた

このページのコードは過去に利用していたもので、現在は利用していません。新しいコードは「JavaScript での外部CSS切り替え方法(複数版)」のページでどうぞ。

今回は JavaScript で、HTMLに適用される外部CSSファイルを切り替えられるようにしたので、その方法を載せておきます。

JavaScript によるスタイルシートの変更方法は、ググってみていろいろ見つけたのですが、このサイトは clip によるCSS splites を利用しているのもあり、JavaScript 無効時にCSSも適用されなくなるタイプのものは利用したくありません。(同じ画像がずらーっと出ます。)

で、それらを除いても rel 属性に alternate を使って行う方法などたくさんあるわけですが、勉強がてらにに別の方法を考えてみました。

切り替え方法

ここで紹介する方法は、セレクトボックスから適用させたいスタイルを選択した場合に、外部CSSファイルを読み込む href 属性の値を書き換えて、切り替えを行います。

概要

  1. まず、HTML側の外部CSSを読み込んでいる link 要素に id 属性を設定します。
  2. 次に、外部CSSを切り替えるためのセレクトボックスを設置し、select 要素の onchange 属性で、メニュー選択肢である option 要素の value の値を、指定したスクリプトに渡すようにします。
  3. 渡された value の値を if で判別し、条件によって link 要素のURLを書き換えるスクリプトを用意します。
  4. 最後に、ページを移動しても変更した外部CSSを適用したままにするために、Cookie の設定が必要となります。

    サイト内リンク : JavaScript で Cookie を保存・削除する方法

サンプル

HTML

head への記述
  • <link rel="stylesheet" href="スタイル1のURL" type="text/css" id="o_style" />
body への記述
  • <script type="text/javascript">select_style();</script>

JavaScript

  • function select_style(){
    • if(document.cookie.match(/style=black/)){
      • document.getElementById('o_style').href=document.getElementById('o_style').href.replace('スタイル1のファイル名','スタイル2のファイル名');
      • }
    • document.write
    • ('<select onchange="change_css(value);" tabindex="2"><option selected="selected">スタイルの変更</option><option value="normal">スタイル1</option><option value="black">スタイル2</option></select>');
  • }
  • function change_css(id){
    • if(id=='normal'){
      • document.cookie='style=black;max-age=0;expires=Thu, 1-Jan-1900 00:00:00 GMT;path=/';
      • document.getElementById('o_style').href=document.getElementById('o_style').href.replace('スタイル2のファイル名','スタイル1のファイル名');
    • }else if(id=='black'){
      • if(document.cookie.match(/style=black/)){
        • document.getElementById('o_style').href=document.getElementById('o_style').href.replace('スタイル1のファイル名','スタイル2のファイル名');
      • }else{
        • document.cookie='style=black;max-age=604800;path=/';
        • document.getElementById('o_style').href=document.getElementById('o_style').href.replace('スタイル1のファイル名','スタイル2のファイル名');
      • }
    • }
  • }

補足

  1. このサンプルでは、本来読み込む外部CSSがスタイル1で、代替がスタイル2としています。
  2. CSSを読み込む link 要素に id="o_style" を設定し、その部分のURLを JavaScript で変更しています。
  3. if(document.cookie.match(/style=black/)) の部分は、パターンマッチです。この場合、Cookie に style=black があればという条件になります。
  4. スタイル1(value の値は normal)が選択された時、URLの書き換えと共に他のスタイル用の Cookie を削除します。
  5. スタイル2(value の値は black)が選択された時、そのスタイル用の Cookie (style=black)を置きURLを書き換えます。すでにそのスタイルの Cookie がある場合は、URLの書き換えのみ行います。

    より複数のスタイルを扱う場合、ここでも他のスタイルの Cookie の削除を行います。

  6. replace で置換していますが、これはより多くのスタイルを利用する場合、条件となる Cookie の値を配列に入れて for で配列分の数だけパターンマッチしたりする場合に初めて意味があるものです。

    なので、2,3種類しか用意していない場合は、絶対パスでURL直貼りの方が単純になります。

  7. 有効期限は max-age の方が記述が少なくて済むのですが、Cookie に限ってはIEで max-age が効いてくれません。なので、Cookie の削除の部分だけ expires を追記しています。

後書き

サンプルでは切替の方法部分だけを説明するため、外部CSSが2種しかない場合を記述しました。

もっと増やしたい場合は、配列と for文 を組み合わせたり、設定された Cookie の値を抜き出して書き換えたりしてみて下さい。。

外部CSSが複数ある場合の変更方法を記述してみたので、そちらでどうぞ。
サイト内リンクJavaScript での外部CSS切り替え方法(複数版)

問題として、この方法ではプルダウンメニューからスタイルを選択した時に、link 要素のURLを書き換えることになるのですが、書き換えられて初めて代替CSSをダウンロードするため、適用されるまでの一瞬CSSが何も適用されていない状態になってしまいます。

まあ、一度変えた後の変更はキャッシュからになるため問題ないのですが、どうしても気になる場合は、他の方法をググって探してみて下さい。たくさんありますし。

スポンサードリンク

inserted by FC2 system