Edited at

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 を汚さなくて済むのも良い。