jQueryで動的につくったテキストの幅を取得する

jQueryで動的につくったテキストをティッカーのようにスクロールさせたくて事前にテキストノードの幅を知りたいと思ったので、一旦こんな感じでつくってみました。

ダミーの要素をつくって、一瞬bodyに貼り付け幅をはかっています。

function getWidth($txt) {
    var $body = $(document.body),
        $dummy = $('<span>'),
        width;

    $dummy.text($txt.text());
    $dummy.css({
        position: 'absolute',
        top: 0, left: 0,
        color: 'transparent',
        font: $txt.css('font'),
        'letter-spacing': $txt.css('letter-spacing'),
        'z-index': -1 
    });
    
    $body.append($dummy);

    width = $dummy.width();

    setTimeout(function() {
        $dummy.remove();
    }, 0);
    
    return $dummy.width();
}

こんなかんじでつかう想定です。

が。現状ではbodyの幅を超える長さは計測できません。

なので、こんな感じに改修してみました。

function getWidth($txt, opt_max) {
    var $body = $(document.body),
        $dummyWrapper = $('<div>'),
        $dummy = $('<span>'),
        width;

    // ここらへんを追加
    $dummyWrapper.css({
        position: 'absolute',
        top: 0, left: 0,
        width: opt_max || 9999,
        'z-index': -1
    });

    $dummy.text($txt.text());
    $dummy.css({
        color: 'transparent',
        font: $txt.css('font'),
        'letter-spacing': $txt.css('letter-spacing')
    });
    
    $body.append($dummyWrapper.append($dummy));

    width = $dummy.width();

    setTimeout(function() {
        $dummy.remove();
    }, 0);
    
    return $dummy.width();
}

一瞬、計測のために超長い要素を追加しています。
なんか美しくないですが、一旦これで実装を進めてしまうと思います。

---

https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！