1

文字列の幅を測定しようとしています。これを行うには、文字列を値として div 幅を作成し、それを追加して DOM を実行し、Jquery の .width() を使用して幅を測定します。

問題は、Firefox と Chrome でスクリプトを実行すると異なる結果が得られることです。

jsFiddle を作成しました: http://jsfiddle.net/7wjeB/2/

HTML:

<body>
<div>
    <input id="input" value="office worker" style="display:block; position:static; font-family: Arial, Helvetica, sans-serif; font-size: 25px;"></input>
    <button onclick="calc()" style="font:Arial; font-size:12px;">Calculate width</button>
</div>
</body>

JavaScript:

width = function(font, string) {

    var f = font || '12px arial', o = $('<div>' + string + '</div>').css({
        'position' : 'absolute',
        'float' : 'left',
        'white-space' : 'nowrap',
        'visibility' : 'hidden',
        'font' : f
    }).appendTo($('body')), w = o.width();
    o.remove();
    return w;
};

calc = function() {
    var content = $("#input").val();
    var font = $("#input").css("font-size") + " " + $("#input").css("font-family");
    alert(width(font, content));
};

Firefox バージョン 19.0.2 と Chrome バージョン 26.0.1410.64 を使用しています

4

0 に答える 0