この記事は賞味期限切れです。（更新から1年が経過しています）

例えばブラウザによってスタイルを追加したり、
ウィンドウサイズによってスタイルを変えたり。
JavaScriptで動的にスタイルシートを切り替えたい時用に
ちょこざいなやつを備忘録としてまとめておきます。

1. 条件でスタイルシートを追加する
2. 条件でスタイルシートを切り替える
3. ウィンドウサイズでスタイルを切り替える

1. 条件でスタイルシートを追加する

(function( config, once ){
    var styledir = $("link[rel=stylesheet]:last").attr("href").replace(/[^\/]+?$/,""),
        i = config.length,
        c;

    while(i--){
        c = config[config.length - i - 1];
        if( c.rule ){
            $("head")[0].appendChild(
                $("<link />")
                .attr({ rel:"stylesheet", type:"text/css", href: styledir + c.css })[0]
            );
            if( once ){ break; }
        }
    }
})( [
    { rule:( typeof(document.documentElement.style.maxHeight) === "undefined" ), css:"ie6.css" },
    { rule:( location.href.match( "/the/path/to/test.html" ) ), css:"some.css" }
], true );

第一引数のconfigは、設定用のオブジェクトリテラルが列挙された配列、
第二引数のonceは、一度条件に合致した場合にループを抜けるかどうかのboolean。
config[n].ruleにtrueが格納されている場合に、config[n].cssへのリンク要素を追加します。

スタイルシートへのパスは、head要素内の最後のLink要素から
ディレクトリを抜き取っています。（styledir）

jQueryを使っておきながらappendTo等の便利なメソッドを使っていないのは、
link要素のappendがIEで上手く動作しなかったためです。
cf) JS備忘録: jQueryでlink要素をappendしたかった

2. 条件でスタイルシートを切り替える

今度は追加ではなく、idをふったlink要素のhrefを差し替えます。

<link rel="stylesheet" type="text/css" href="hogehoge.css" id="mystyle" />

JavaScript

(function( id, config, once ){
    var styleobj = $("#"+id),
        cssdir = styleobj.attr("href").replace(/[^\/]+?$/,""),
        i = config.length,
        c;

    while(i--){
        c = config[ config.length - i - 1 ];
        if( c ){
            styleobj.attr( "href", cssdir + c.css );
            if( once ){ break; }
        }
    }
})( "mystyle", [
    { rule: val_a, css: "style-a.css" },
    { rule: val_b, css: "style-b.css" }
], false );

第一引数でlink要素のidを受け取るようにしています。
残りの引数は1.と同様です。（値は手抜きですが）

3. ウィンドウサイズでスタイルを切り替える

ちょっと前にそんな記事を読んだ気がしたので、2.を応用してやってみました。

<link rel="stylesheet" type="text/css" href="style-a.css" id="mystyle" />

JavaScript

(function( id, config, once ){
    var styleobj = $("#" + id),
        styledir = styleobj.attr("href").replace(/[^\/]+?$/,""),
        switchStyle;

    switchStyle = function(e){
        var i = config.length, 
            w = String($(e.target).width()),
            c;

        while(i--){
            c = config[ config.length - i - 1 ]
            if( eval( w + c.rule ) ){
                styleobj.attr( "href", styledir + c.css );
                if( once ){ break; }
            }
        }
    }

    $(window).bind("load", switchStyle );
    $(window).bind("resize", switchStyle );

})( "mystyle", [
    { rule: ">= 640", css: "style-a.css" },
    { rule: "< 640", css: "style-b.css" }
], true );

1,2と違って、config[n].rule には左辺にウィンドウの幅をとる数式を文字列で指定しています。
あとは概ね2と同じ感じですね。

もう少し公開に適した形はあるとは思うのですが、
なにせ「ライブラリの在処より作り方を覚えておこう」というのがモットーの為…