Monday, 17 June 2013

jQueryでline-height値を取得する時、IEだけ返り値が違う

とあるCSSで
body {
    font-size: 12px;
    line-height: 2;
}
と指定し、jQueryにてline-heightの値を取得する時、
var lineHeight = parseFloat($("body").css("line-height"));
とすると、通常「24」と、font-size*line-heightが内部計算された数値が返される(parseFloatは文字列を数値に変換する関数。parseFloat関数なしだと「24px」と単位付きの文字列が返される)。しかし、IEではCSSでline-heightに指定した値「2」がそのまま返されて他のブラウザと異なる結果となり非常に困る。それ故ブラウザ判別のスクリプトが必要になる(ホンマにメンドイ)。

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
   
if (userAgent.indexOf('msie') != -1) {
    if (appVersion.indexOf('msie 6.') != -1) { //ie6のとき
        var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
        var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
        var bHeight = Math.round(lineHeight)
    } else if (appVersion.indexOf('msie 7.') != -1) {//ie7のとき
        var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
        var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
        var bHeight = Math.round(lineHeight)
    } else if (appVersion.indexOf('msie 8.') != -1) {//ie8のとき
        var getStyle = $("body")[0].currentStyle || document.defaultView.getComputedStyle($("body")[0], '');
        var lineHeight = getStyle.lineHeight*parseFloat($("body").css("font-size"));
        var bHeight = Math.round(lineHeight);
    } else if (appVersion.indexOf('msie 9.') != -1) {//ie9のとき
        var lineHeight = parseFloat($("body").css("line-height"))*parseFloat($("body").css("font-size"));
        var bHeight = Math.round(lineHeight);
    } else if (appVersion.indexOf('msie 10.') != -1) {//ie10のとき
        var lineHeight = parseFloat($("body").css("line-height"))*parseFloat($("body").css("font-size"));
        var bHeight = Math.round(lineHeight);
    }
}else{//ie以外
    var lineHeight = parseFloat($("body").css("line-height"));
    var bHeight = Math.round(lineHeight);
}

これで、IEでも期待する値「24」が返ってくる、はず。

上記スクリプトは、JavaScriptでUserAgentによるブラウザ判定「if.useragent.js」v0.9 | みやなび | 宮古島 ホームページ制作 広告代理店より拝借した。深謝。
ie6〜8のとき変数getStyleがあるのは、jQuery を利用して1行の高さ(line-heigt)を取得する: JavaScriptメモを参考にした。深謝。

最終的なline-heightの値は、Math.round関数にて小数点以下四捨五入で丸めてある。

No comments:

Post a Comment