スタイルシートを切り替える

概要

2005/12/18 - 2009/06/09

JavaScriptを用いて、複数の外部CSSファイルとして読み込んだスタイルシートを動的に切り替える方法について。

本ページでは切り替え方のみについて解説している。実際の利用用途としてはこの文章を書いている時点でこのページに搭載されている、ユーザーが代替スタイルを選んで選択する機能の他には、ブラウザ別に補正CSSを有効化する機能も考えられる。

外部CSSの種類

2005/12/18 - 2009/06/09

外部CSSファイルは通常link要素を用いて以下のように読み込ませる。

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

この方法で読み込ませたCSSは固定スタイルシートと呼ばれる。この他に"固定"以外に"優先","代替"の2種類が存在する。

固定スタイルシート

<link rel="stylesheet" href="ファイルURI" type="text/css">

優先スタイルシート

<link rel="stylesheet" href="ファイルURI" type="text/css" title="スタイル名">

代替スタイルシート

<link rel="alternate stylesheet" href="ファイルURI" type="text/css" title="スタイル名">

固定スタイルシートは必ず適用される。優先スタイルシートはページを開いた時に他の代替スタイルより優先して適用される。そして代替スタイルシートは後から適用するスタイルを変更することで適用される。

ブラウザシェアの殆どを占めるInternet Explorerは代替スタイルの選択機能を持っていない。そのため、通常代替スタイルを記述してもMozillaやOperaのみでしか使うことができない。しかし、JavaScriptを介すことによってInternet Explorerでも適用が可能になる。

JavaScriptで代替CSSを適用する手順

2005/12/18 - 2010/04/07

HTMLには次のように優先と代替を記述しておく。数に制限は全くない。スタイル名は日本語も使用可能。

<link rel="stylesheet" href="style.css" type="text/css" title="Main">
<link rel="alternate stylesheet" href="style2.css" type="text/css" title="Red">
<link rel="alternate stylesheet" href="style3.css" type="text/css" title="Blue">

これらをスクリプトで変更するにはdocument.styleSheetsプロパティを使う。

(2010/04/07)WebKit(Safari,GoogleChrome)で変更できない問題を改善したソースコードに張り替えた。document.styleSheetsを使わず、link要素からtype="text/css"を持つスタイルシートのみを列挙している。ss.disabled = !ss.disabled;の二重化もWebKit対策となっている。

以下に記すJavaScript関数は引数にスタイル名をつけて呼び出されると、引数のスタイル名以外の名前を持つ全スタイルを無効にする。これによって指定したスタイルだけが適用される。例えばRedの名前のついたスタイルだけを適用したいならChangeStyle("Red");とする。

ChangeStyle = function( name )
{
        var i,ss;
        var sl = document.getElementsByTagName('link');
        for( i=0 ; i<sl.length ; i++ )
        {
                ss = sl[i];
                if( ss.type!="text/css" )continue;
                if( ss.title || ss.title!="" )
                {
                        ss.disabled = ( ss.title==name ) ? false:true;
                        ss.disabled = !ss.disabled;ss.disabled = !ss.disabled;
                }
        }
}

スタイルシートを切り替えるサンプル。

Cookie保存版

2007/07/22 - 2010/04/07

Cookieに現在使用中のスタイル名を保存し、次回から使用中のスタイルを自動的に適用できる。

変更点はスクリプトのコード部分のみ(強調部分が各自で指定するところ)。尚、スクリプト読み込み時点で適用されるスタイルを変更しているため、ページロード完了までのタイムラグがない代わりに、スクリプトより後に読み込まれるスタイルは認識されない。スクリプトはheadの最後尾に書くのが良いだろう。

function ChangeStyle( name,noCookie ) {
        var i,ss;
        var sl = document.getElementsByTagName('link');
        if( !noCookie )setCookie( "CSSstyle",name );
        for( i=0 ; i<sl.length ; i++ )
        {
                ss = sl[i];
                if( ss.type!="text/css" )continue;
                if( ss.title || ss.title!="" )
                {
                        ss.disabled = ( ss.title==name ) ? false:true;
                        ss.disabled = !ss.disabled;ss.disabled = !ss.disabled;
                }
        }
}
function setCookie( name,val ) {
        var path = "/~geko/arch_web/02_sample/"; //自分のサイトのパスを指定
        var days = 50; //Cookieの保存期限を指定
        var d = new Date();
        d.setTime(d.getTime() + (1000 * 60 * 60 * 24 * days));
        var cookie = name + "=" + val + "; expires=" + d.toGMTString();
        if( path ) cookie += "; path=" + path;
        document.cookie = cookie;
}
function setStyle() {
        var ar = document.cookie.split("; ");
        var st;
        for( var i=0 ; i<ar.length ; i++ )
        {
                pair = ar[i].split("=");
                if( pair[0]=="CSSstyle" ) {
                        st =  pair[1];
                        break;
                }
        }
        if( window.opera )ChangeStyle( "Main",true );//Opera用、初期スタイルを指定(設定箇所)
        if( st )ChangeStyle( st,true );
}
setStyle();

適用中のスタイルをCookieに保存して利用するサンプル。