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と同じ感じですね。

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

途中までは前記事と似たような処理なのでちょっと割愛してるところもあるのでご注意。

1. 画像の読み込み

private var bl:BulkLoader = new BulkLoader("imageloader");

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

2. SimpleButtonをつくる

var btn:SimpleButton = new SimpleButton(
    new Bitmap(bl.getBitmapData("images/button_normal.png")),
    new Bitmap(bl.getBitmapData("images/button_over.png")),
    new Bitmap(bl.getBitmapData("images/button_down.png")),
    new Bitmap(bl.getBitmapData("images/button_normal.png"))
);
addChild(btn);

SimpleButton – ActionScript 3.0

使い方は上記リンク参照。余計なもの（!?）をimportしなくていい分心地よいです。

ただし、このままではBitmapButtonにはあった「選択時」の状態が使用できません。
この点は今頭を悩ましているところですね。

2010/05/17

さすがに端折りすぎたのでコードを追記

2010/05/24

フォロー記事書きました。
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」

例えばこんなナビゲーションがあるとしますね。

こんなかんじにマークアップされているとしましょう。

<ul id="navi">
    <li><a href="#" id="navi-home">HOME</a></li>
    <li><a href="#" id="navi-product">PRODUCTS</a></li>
    <li><a href="#" id="navi-about">ABOUT</a></li>
    <li><a href="#" id="navi-blog">BLOG</a></li>
    <li><a href="#" id="navi-contact">CONTACT</a></li>
</ul>

アクティブに見せる為の「.active」クラスを用意します。

#navi li a.active {
    /* なんらかのスタイル */
}

仕上げにスクリプトを書きます。jQuery使ってます。

var naviConfig = [
    { rule:"/product/", selector:"#navi-product" },
    { rule:"/about/", selector:"#navi-about" },
    { rule:"/blog/", selector:"#navi-blog" },
    { rule:"/contact/", selector:"#navi-contact" }
];
(function(config){
    for(var i=0;i<config.length;i++){
        if( location.href.match(config[i].rule) ){
            $(config[i].selector).addClass("active");
            return;
        }
    }
})( naviConfig );

ご覧の通り、ruleの文字列に現在のURLがマッチした場合に、
selectorにあてはまる要素にactiveクラスを付加しています。
それだけです。

例えば、URLが「http://www.example.com/product/hogehoge.html」等だった場合に、
「/product/」の部分がマッチして#navi-productの要素がアクティブになります。
複雑なルール付けが必要な場合は、ruleに正規表現を使用してもいいですね。

静的にclass=”active”を書くのが良いとも言えますが、
Dreamweaverのライブラリや各CMSでモジュール化してあるナビゲーションだと、
条件分岐などが面倒な場合があります。
そんな時はこんな感じにJavaScriptを使ってさっくり処理してしまうのも一手かと。

jQuery.proxy

jQuery.proxy() – jQuery API

jQuery.proxy( function, context )

function

文脈を変えたいfunction

context

functionでthisとして扱いたいオブジェクト

つまりはイベントハンドラ等にfunctionを渡すとき、
そのfunction内で使うthisをあるオブジェクトに固定しておきたいときに使います。

DEMO

DEMO (on JSbin)

<input type="button" value="Normal" id="normalButton" name="normalButton" />
<input type="button" value="With Proxy" id="proxyButton" name="proxyButton" />

<script type="text/javascript">
var TestObj = {
    name:"John",
    func:function(){
        alert(this.name);
    }
};
$("#normalButton").bind("click", TestObj.func); // "normalButton"
$("#proxyButton").bind("click", $.proxy( TestObj.func, TestObj ) ); // "John"​
</script>

Prototype.jsの場合は、functionを拡張した形で実装されていた覚えが。

DEMO (on JSbin)

<input type="button" id="normalButton" name="normalButton" value="Normal" />
<input type="button" id="bindButton" name="bindButton" value="With Bind" />

<script type="text/javascript">
var MyObj = {
    name:"John",
    func:function(){
        alert(this.name);
    }
};
$("normalButton").observe( "click", MyObj.func ); // "normalButton"
$("bindButton").observe( "click", MyObj.func.bind(MyObj) ); // "John"
</script>

こんな感じですね。この形も使いやすくて好きなのですが、
乗り換えた時期は猫も杓子もjQueryなご時世だったもので。

検索から「bind的なノリの～」に飛んできた人に申し訳なく、
フォローのつもりでここにログっておきます。

CSSのセレクタがどのように上書きされていくのかを理解する為の、
ポイント制を導入したちょっとしたTipsです。

CSSセレクタの点数計算法

（どうでもいいけどタイポ多くてなごみました。）

CSSのセレクタを次のように計算する考え方ですね。

• HTML要素 : 1点
• クラス : 10点
• ID : 100点

引用元の記事から例を拝借しますが、

#test { background: red; } /* specificity : 100 */
.item p { background: green; } /* specificity : 10 + 1 = 11 */
p { background: orange; } /* specificity : 1  */
body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */

このように計算して点数が高いほうが適用される（であろう）、というわけです。
それぞれのセレクタがどの程度の影響力を持っているか知っていると
コーディングの助けになりそうですね。

2010/04/20

上記のリンク先を読むとかいてありますが、
インライン要素は1000点とされているらしいです。

他の計算方法

似たような計算方法で、

• a = もしインライン指定ならば1
• b = IDの数
• c = 属性セレクタ/クラス/擬似クラスの数
• d = HTML要素の数

として、

<p style=”color:#000000;”>

a=1, b=0, c=0, d=0 → 1000

“footer nav li:last-child”

a=0, b=0, c=1, d=3 → 0013

“# sidebar input:not([type=”submit”])”

a=0, b=1, c=1, d=1 → 0111

このように点数を作り上げる方法もあるみたいですね。
cf) CSS Specificity And Inheritance – Smashing Magazine

余談

（であろう）とつけておいたのは、
ただ単純に計算式の通りになるというわけではなく、
他の要因も絡んでくるという事。
極端な馬鹿げた例で大変恐縮なのですが

.mylink {
    color:red;
}
body div div div div div div ul li span a {
    color: blue;
}

前者はクラスで10点、後者はHTML要素*11=11点。
ですが、リンクの色は赤になります。（本当に馬鹿げた例だ！）

JavaScriptの動的ロードと言えば、「RequireJS」が公開されています。
cf) 外部jsを読み込む事ができるJavaScriptライブラリ「RequireJS」 | Web活メモ帳

たまたま自分が書いていたのと同じような内容で、オッと思いましたが
せっかく書いてしまったものなのでメモっておきます。

var jsLoader = {
    length:null,
    callback:null,
    init:function(list,callback){
        this.length = list.length;
        this.callback = callback;
        while(url=list.shift()){ this.load(url); }
    },
    load:function(url){
        if(!this.findobj(url)){
            var ele = document.createElement("script");
            var _this = this;
            ele.src = url;
            ele.onload = function(){
                _this.onloaded();
            };
            ele.onreadystatechange = function(){
                if(this.readyState=="loaded"||this.readyState=="complete"){
                    _this.onloaded();
                }
            };
            document.body.appendChild(ele);
        }
    },
    onloaded:function(){
        this.length --;
        if(!this.length) this.callback();
    },
    findobj:function(url){
        var eles = document.getElementsByTagName("script");
        for(i in eles){
            if(eles[i].src==url){
                this.onloaded();
                return true;
            }
        }
        return false;
    }
};

RequireJSとかなーりボリュームが異なりますね…
必要最低限な感じで、色々不足している処理がありそうで怖い。
使い方は奇しくもRequireJSと同じ。

jsLoader.init([
    "jquery.js",
    "jquery-ui.js",
], function(){
    //do something
});

第一引数にはロードしたいjsファイルのURLを配列で、
第二引数にはコールバック関数を渡します。
コールバックはjsファイルのロードが全て完了した時に呼ばれます。

暇があったらRequireJSのソースも読んでみるとします。