JavaScriptで幅を取得するときにoffsetWidth
を使っていたら、少しハマりました。
トラブル
「中身の最大幅に合わせて幅を調整する」必要の生じた場面があったので、こちらの記事を参考にして、「実際に表示する場所と同じレイアウトのスタイル」をかけた要素を用意して、offsetWidth
で幅を測ってみました。
そして、その幅を本来表示させる箇所に適用した…ところ、なんと幅が足りず途中で改行が入ってしまう事態となりました。
原因と対策
.offsetWidth
のMDNページに説明がありますが、
This property will round the value to an integer.
つまり、.offsetWidth
は値が整数に丸められる、ということです。そのため、小数の幅で切り捨てられた場合には実際の表示幅より.offsetWidth
のほうが小さくなってしまうのです。その値をセットすれば、1ピクセル未満ではあるけど幅が足りなくなってしまった、という寸法です。
対策としては、MDNにあるように.getBoundingClientRect().width
を使って値を取れば、小数値まできっちり取れます(フロートの高さ揃えなど、1ピクセル未満の誤差も出せないような場合はこちらが必要になります)。今回の場合は、最大1.5ピクセル広くなることは問題でなかったので、.offsetWidth
の値に1を足して、小さくならないようにすることで対応しました。