フォントサイズを切り替えるJS:改2

最新版はコチラ！

以前書いたフォントサイズを切り替えるJS:改をさらに改良してみた。

• フォントサイズの切り替えをonload以前に行うようにした
• IEでclassが書き換わっていないバグを修正した。

今回、「フォントサイズの切り替えをonload以前に行うようにした」が特筆すべき点！
前回の改良によって、変更できるエリアをid指定できる分、変更のタイミングがonload時になってしまったため
ページが表示されてから"かくんっ☆"と遅れてサイズが変更される仕様になってしまった。今回はこれを解消するよ。

例によってソースは続きを見て。

var fontSizeSwitcher = {
    str: '',
    config: {
        area: ['main'],
        length: 3,
        id: ['fontSizeSwitcherSmall', 'fontSizeSwitcherMedium', 'fontSizeSwitcherLarge'],
        label: ['S', 'M', 'L'],
        size: ['85%', '100%', '122%'],
        cookieName: '10CoinFontSizeSwitcher',
        cookieDate: 90
    },

    changeFontSize: function(size) {
        var config = this.config;
        var items  = document.getElementById('fontSizeSwitcher').childNodes;

        for(var i = 0, l = items.length; i < l ; i++) {
            if(size == i) {
                this.setClassName(items[i], 'current');
            }
            else {
                this.removeClassName(items[i]);
            }
        }

        var ss = document.styleSheets[0];

        for(var i = 0, l = config.area.length; i < l; i++) {
            if (document.fileModifiedDate) {
                ss.addRule('#' + config.area[i], 'font-size: ' + config.size[size]  + ';');
            }
            else {
                ss.insertRule('#' + config.area[i] + '{ font-size: ' + config.size[size]  + '; }', ss.cssRules.length);
            }
        }

        // set cookie
        this.setCookie(size);
    },

    setCookie: function(data) {
        var t = new Date();
        t.setTime(t.getTime() + (1000 * 60 * 60 * 24 * Number(this.config.cookieDate)));
        document.cookie = this.config.cookieName + '=' + encodeURIComponent(data) + '; path=/; expires=' + t.toGMTString();
    },

    getCookie: function(m) {
        return (m = ('; ' + document.cookie + ';').match('; ' + this.config.cookieName + '=(.*?);')) ? decodeURIComponent(m[1]) : null;
    },

    setClassName: function(elem, str) {
            if(document.fileModifiedDate) {
                elem.className = str;
            }
            else {
                elem.setAttribute('class', str);
            }
    },

    removeClassName: function(elem) {
            if(document.fileModifiedDate) {
                elem.removeAttribute('className');
            }
            else {
                elem.removeAttribute('class');
            }
    },

    start: function() {
        var target = this;
        var config = this.config;
        var size   = this.getCookie('s');

        for(var i = 0, l = config.length; i < l ; i++) {
            this.str += '<li id="' + config.id[i] + '" onclick="fontSizeSwitcher.changeFontSize(' + i + ')">' + config.label[i] + '</li>';
        }

        document.write('<ul id="fontSizeSwitcher">' + this.str + '</ul>');

        if(size == null) {
            size = 1;
        }

        this.changeFontSize(size)
    }
}

fontSizeSwitcher.start();

ちょろんとコードを説明すると、

for(var j = 0, l = config.area.length; j < l; j++) {
    document.getElementById(config.area[j]).style.fontSize = config.size[i];
}

前回までのフォントサイズ変更部分のコードがこれ。
各要素のstyle属性を直接書きにいく必要があるため、ページがロードされてからでないと各要素を取得することができなかった！

var ss = document.styleSheets[0];

for(var i = 0, l = config.area.length; i < l; i++) {
    if (document.fileModifiedDate) {
        ss.addRule('#' + config.area[i], 'font-size: ' + config.size[size]  + ';');
    }
    else {
        ss.insertRule('#' + config.area[i] + '{ font-size: ' + config.size[size]  + '; }', ss.cssRules.length);
    }
}

これが今回のコード。
document.styleSheetsから読み込まれているCSSを取得し、動的にルールセットを追加している。
CSSが1ファイルでも読み込まれていないとエラーが発生するが、Vicunaならまず問題はないと思う。

そうそう、今回の変更でOpera8以下は動かなくなりました。
動作確認したブラウザは以下。

• Firefox 2.0
• Internet Explorer 6以上
• Opera 9
• Safari 3

前回までのものを使用している方は、コピペしなおしてネ！ヽ(゜▽゜)ノ