Help us understand the problem. What is going on with this article?

【JavaScript】clientWidthプロパティでは小数値は取得できない

JSで横幅や高さを取得する処理を実装することはよくあると思います。
その際に、よく使われるのは

# 横幅取得
element.clientWidth

# 高さ取得
element.clientHeight

上記だと思います。
ただし、clientWidthclientHeightプロパティは整数値に丸め込まれてしまいます。

僕はこれを知らずにclientWidthclientHeightを使ってどはまりました。
横幅や高さを取得した上で計算する際に、小数値が丸め込まれてしまうと計算される値がずれてしまいます。

小数値まで含まれた値が欲しい

タイトルにもあるように、getBoundingClientRect()メソッドを使います。

# 横幅取得
element.getBoundingClientRect().width

# 高さ取得
element.getBoundingClientRect().height

ちなみに、getBoundingClientRect()は要素の横幅・高さだけでなく、ビューポートに対する位置も取得できます。

まとめ

最近は、バックエンドだけでなく、フロントエンドの開発も行うようになりました。
そんなフロントエンド初心者の僕は、基本的に要素の寸法と、そのビューポートに対する位置を取得したいときは、
getBoundingClientRect() を使えば良さそうだと思いました。

clientWidthclientHeightを使うメリットなどがあれば教えてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away