電脳無限回廊 - FontSizeSwicther更新

Home > Script > FontSizeSwicther更新

Newer
Older

FontSizeSwicther更新

2007-11-16
Script

10coin.comのマーブルさんが
いつの間にかFontSizeSwitchを更新していたので紹介ｗ
改良点は以下の通り。

フォントサイズの切り替えをonload以前に行うようにした

IEでclassが書き換わっていないバグを修正した。

このフォントサイズの切り替えをonload以前に行うようにした
というところが今回のミソｗ
ページが表示されてから”カクンッ！”と遅れてサイズが変更されるところが
解消されています。
詳しいソースは10coin.com - フォントサイズを切り替えるJS:改2を見てください。
変更ソースをチョコっと説明。

for(var j = 0, l = config.area.length; j < l; j++) {
    document.getElementById(config.area[j]).style.fontSize = config.size[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);
    }
}

これが今回の変更部分のコードです。

これに伴う変更点は

各要素のstyle属性を直接書きにいく必要があるため、
ページがロードされてからでないと各要素を取得することができなかったのを
document.styleSheetsから読み込まれているCSSを取得し、動的にルールセットを追加している。

ちなみにおまけ。

CSSが1ファイルでも読み込まれていないとエラーが発生する。
Opera8以下は動かなくなりました。

確認ブラウザは以下の通り。

Firefox 2.0

Internet Explorer 6以上

Opera 9

Safari 3

以外のブラウザでみれないんじゃ～って人は変えなくてもいいかとｗ

Comments:0

Trackback+Pingback:0

TrackBack URL for this entry: http://wintosh.blog109.fc2.com/tb.php/45-983941e4
Listed below are links to weblogs that reference: FontSizeSwicther更新 from 電脳無限回廊

Home > Script > FontSizeSwicther更新

Font Size Switch

Profile

プロフィール画像