JavaScriptでテキストの幅を取得する方法

描画する前にテキスト幅を事前取得したい場合に使える。

clientWidth を使った方法

clientWidthを使った方法

    const span = document.createElement('span');
    span.style.position = 'absolute';
    span.style.top = '-9999px';
    span.style.fontSize = '13px';
    span.style.fontFamily = 'Segoe UI';
    span.textContent = 'あいうえお';
    // 一旦 DOM Tree に append しないといけない
    document.body.appendChild(span);
    console.log(span.clientWidth);
    // 幅を取得したら remove
    document.body.removeChild(span);

事前にとはいいつつも、一旦 DOM に追加しているので、あまりよろしくない。

measureText を使った方法

measureTextを使った方法

    // canvas は DOM Tree に append しなくてもいい
    const ctx = document.createElement('canvas').getContext('2d');
    ctx.font = '13px "Segoe UI"';
    console.log(ctx.measureText('あいうえお').width);

簡潔。

結論

measureText を使った方法が簡潔で良い。DOM Tree を汚さなくて済むのも良い。