offsetLeft

offsetLeft

[1] offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js (2008-11-02 01:56:08 +09:00 版) <http://d.hatena.ne.jp/susie-t/20061004/1159942798> (名無しさん)

[2] offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について <http://hkom.blog1.fc2.com/blog-entry-503.html> (名無しさん 2008-11-02 03:35:50 +00:00)

[3] Reverse engineering offsetLeft, offsetTop and offsetParent - Anne’s Weblog ( 版) <http://annevankesteren.nl/2006/05/offset>

[4] Offset attributes again - Anne’s Weblog ( 版) <http://annevankesteren.nl/2006/06/offset-attributes>

body だとどうなるか

[11] overflow 通常時

Firefox3Safari3Opera 9.52WinIE7
無奇癖奇癖無奇癖奇癖無奇癖奇癖無奇癖奇癖
documentElement.offset*border箱 (padding辺)border箱border箱 (margin辺)border箱viewport 内容箱viewport border箱
body.offset*border箱 (padding辺)border箱viewport 内容箱 + スクロールバーborder箱 (根要素 margin辺)viewport border箱
documentElement.client*viewportpadding箱 (border辺)viewportpadding箱 (border辺)viewport縦: padding箱 (border辺); 横: viewportviewport 内容箱 (border辺)N/A
body.client*padding箱 (border辺)viewportpadding箱 (border辺)viewportpadding箱 (border辺)viewportpadding箱 (border辺)viewport 内容箱
documentElement.scroll* (Width/Height)画布可視域border箱margin箱左上〜border箱右下viewport border箱
body.scroll* (Width/Height)border箱画布可視域border箱画布可視域(拡張) padding箱
documentElement.scroll* (Top/Left)
body.scroll* (Top/Left)

[13] html, body 共に overflow: scroll の時 (overflow の項を参照。)

Firefox3Opera 9.52
無奇癖奇癖無奇癖奇癖
documentElement.offset*border箱 (padding辺)border箱 (margin辺)border箱
body.offset*border箱 (padding辺)border箱viewport 内容箱 + スクロールバー
documentElement.client*viewportpadding箱 (border辺)viewport縦: padding箱 (border辺); 横: viewport
body.client*padding箱 可視部 (border辺)padding箱 可視部 (border辺)viewport
documentElement.scroll* (Width/Height)画布可視域border箱☆※border箱
body.scroll* (Width/Height)padding箱 内容画布可視域
documentElement.scroll* (Top/Left)
body.scroll* (Top/Left)

[12] 凡例:

[10] 注意:

body 外の要素だとどうなるか?

[5] html 要素appendChild してみた。 <http://suika.fam.cx/~wakaba/-temp/test/dom/element/cssom/offset/> の offset-*-html-child-*。

[6] offsetParent:

奇癖モードの場合や htmlbackground-color を指定した場合でも変わらず。

[7] offsetTopoffsetLeft:

[9] ちなみに getBoundingClientRect なら Firefox3Opera9 共正しい値が取れます。

関連

[8] getClientRects, getBoundingClientRect というのもあります。

[14] [cssom-view] Web compatibility of float return values for offsetWidth/Height ( (Boris Zbarsky 著, 版)) <http://lists.w3.org/Archives/Public/www-style/2014Jul/0035.html>