20
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

offsetWidthの落とし穴

Posted at

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を足して、小さくならないようにすることで対応しました。

20
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?