CSSをURIのクエリーで切り替えるJavaScript

2008-03-06 追記: jQuery無しで動くように修正しました
あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています）

• CSSをクエリーで切り替えるJavaScript 動作サンプルページ

(function(){

    //クエリーにstylesheetがあれば切り替え関数呼び出し
    if(location.search.match(/\bstylesheet=([\w]+)/)){
        var titleValue = RegExp.$1;
        changeStyle(titleValue);
    }

    // CSS切り替え関数
    // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
    // 一致しなかったものは無効にする
    // もともとtitle属性が無いものには何もしない
    function changeStyle(titleValue){
        //relとtitle属性の有るlinkを配列に格納
        //var links = $('link[@rel*=style][@title]');
        var head = document.getElementsByTagName('head')[0];
        var allLinks = head.getElementsByTagName('link');
        var links = [];
        for(var i=0; i<allLinks.length; i++){
            var link = allLinks[i];
            var linkRel = link.getAttribute('rel');
            var linkTitle = link.getAttribute('title');
            if(linkTitle && linkRel.match(/\bstylesheet\b/)){
                links.push(link);
            }
        }
        //すべてDOMから撤去する
        var matchedLink;
        for(var i=0;i<links.length;i++){
            links[i].disabled = true;
            links[i].parentNode.removeChild(links[i]);
            //引数と一致したものをmatchedLinkに保存する
            if(links[i].title == titleValue){
                matchedLink = links[i];
            }
        }
        if(!matchedLink)return;
        //有効にするlinkのrelをstylesheetにし、新規にDOMに追加
        var link = document.createElement('link');
        link.disabled = true;
        var attrs = matchedLink.attributes;
        for(var i=0;i<attrs.length;i++){
            var nodeValue = attrs[i].nodeValue;
            var nodeName = attrs[i].nodeName;
            if(nodeValue){
                if(nodeName=='rel'){
                    nodeValue='stylesheet';
                }
                link.setAttribute(nodeName,nodeValue);
            }
        }
        head.appendChild(link);
        link.disabled = false;
    }

})();

>|xhtml||


|

*1:基本的にIE7でチェック