WinIE5.0専用sub要素をDOMでfont要素に置き換えむりくり表現するJavaScript

Tweet

今やっている HTML の仕事、あとで楽するために今苦労して下付の添字などを sub 要素でくくっているのですが、それだと下がりすぎですベースラインに合わせて、と言われたので、CSS で調整したのですが直りません。

よく調べてみると、お客さまの IE が 5.0 だっていうことがわかって、vertical-align が数値で指定できないのです。

ということで、DOM を使って sub 要素を font 要素に置き換える羽目になりました。

JavaScript 文法確かめてなくあっちこっちからのつぎはぎコードなのでキッタナイコードだけど残しておきます。

// sub 要素を、font 要素に置き換えします。
// Internet Explorer 5.0 は CSS による
// Vertical-align が有効に働かないので、
// sub 要素によるレンダリングを
// ベースラインにあわせたいときにはこれを使います。
//
// usage:
// <script type="text/JavaScript" src="sub.js"><script>
 
function onloadevent() {
    if (checkbrowser()) {
        replacesubtofont();
    }
}
 
function checkbrowser(){
    if (navigator.appVersion.match(/MSIE 5.0/)) {
        return 1;
    }
    else {
        return 0;
    }
}
 
function replacesubtofont() {
    dObj= document.getElementsByTagName("sub");    // sub 要素のコレクション
    n = dObj.length;                               // 要素数（ループ内だと変動します）
    for(var i = 0; i < n; i++) {
        nObj = document.createElement("font"); // font 要素を作る。
        nStr = document.createTextNode(dObj[0].innerHTML); // sub 要素の中身
        nObj.appendChild(nStr);         // font 要素の中身（= sub 要素の中身）
        nObj.setAttribute("size", "1"); // font 要素の属性 size="1"
        dObj[0].replaceNode(nObj, dObj[0].firstChild); 
            // sub 要素を作っておいた font 要素で置換
    }
}
 
onload = onloadevent;
 

はからずも DOM いじりを覚えてしまいましたとさ。楽しいかも……。

2006.02.17 02:35 投稿　大野 義貴 [Web] | 固定リンク |