cafegale(LeafCage備忘録)

LeafCage備忘録(はてなダイアリー)と統一しました。

なんでinnerWidth outerWidthじゃなくて clientWidth offsetWidth なの?

ブラウザ js の、DOM要素のサイズを取得するプロパティ/メソッドの話。

 

q-az.net

js標準であるECMAScriptでは、jQuery なら .innerWidth であらわされるものが .clientWidth に、.outerWidth であらわされるものが .offsetWidth になるんですと。

多少わかりにくい命名なのだが、これ単体なら命名の違い程度にしか思わない。

しかし、ウィンドウの幅を取得するときにはECMAScriptwindow.innerWidth(ウィンドウ内側表示領域(垂直スクロールバー含む))、window.outerWidth(ブラウザのウィンドウサイズ)を使うんですと。

統一しとけよって思う。

マウスイベントなどのときの `offsetX` や `clientX` の扱い方とかを見る限り、JavaScriptは "offset" や "client" という語をかなりいい加減に扱っているように思われる。(ここでは `client` をウィンドウからの距離、`offset` を発火したDOM要素からの距離として扱っている)

qiita.com

 

web-designer.cman.jp

 

ところで、DOM要素のサイズを取得するのに`getClientRects()`というのがあるが、直接`offsetWidth`で取得できるのに、このメソッドの存在意義はあるのだろうか?
(getClientRects()の返り値のDOMRectの`height`が`offsetHeight`、`width`が`offsetWidth`相当)

 

なんかうまくまとめてる記事見つけた。

babyron64.hatenablog.com