Safariの位置に関するプロパティまとめ

Javascript

最近、Safari上でJavascriptを組むことが多く成ってきたのでコレを機に把握しきれていない位置関連のプロパティをまとめてみることにしました.

はじめに

  • 単位は全てpxで統一
  • 青字のプロパティはDOM(標準ではない)関連のプロパティ
  • 緑字のプロパティはCSS関連のプロパティ

CSS関連のプロパティには単位も含まれますがpxで統一しているので表記上省略しています.

DOM関連のプロパティはdocument.getElementById('id')等で取得したオブジェクトのプロパティです.

CSS関連の値の取得はdocument.defaultView.getComputedStyle(elem,null)で取得したオブジェクトのプロパティを使うと実際に表示されている値が取得できます.プロパティ名にはキャメルケース(LCC)で参照できます.

border,margin,padding関連

例えばdiv要素だとして以下のように覚えるとシンプル！

  • borderも含めた長さがoffsetXxxで取得(Width/Height)
  • borderを含めない長さがclientXxx又はscrollXxxで取得(Width/Height)
  • 上下左右のborderはclientXxxで取得(Top/Right/Bottom/Left)

スクロール時の値

直下の子要素によって、挙動が違います.

どうして+4とか0とかになっているのかドキュメントが見つかりませんでしたが、事実計算方法が違うようです.試したのはimgとdivだけですが、他にも同様の事象があるとおもいます.

スクロールバーが無い場合はscrollWidth/scrollHeightは、それぞれclientWidth/clientHeightと同じくなります.

要素の位置

この例だとdiv要素の３つ重ねています.

例のoffsetTopの算出方法は以下のようになります、

offsetTop = 外側要素(pading-top) + 中間要素(margin-top + border-top + padding-top) + 内側要素(margin-top)
25 = 5 + 5 + 5 + 5 + 5


要素のborderの外側からpositionがstatic以外の親要素のborderの内側との相対距離をoffsetTop/offsetLeftで取得できます.


基準となる親要素はoffsetParentで取得できます.

因にhtml要素と、body要素はposition:staticです.