Edit

Page

Page title:

Page body:

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

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

[3] [CITE[Reverse engineering offsetLeft, offsetTop and offsetParent - Anne’s Weblog]] ([TIME[2009-01-01 17:16:48 +09:00]] 版) <http://annevankesteren.nl/2006/05/offset>

[4] [CITE[Offset attributes again - Anne’s Weblog]] ([TIME[2009-01-01 17:18:29 +09:00]] 版) <http://annevankesteren.nl/2006/06/offset-attributes>

* [CODE(HTMLe)@en[body]] だとどうなるか

[11] [CODE(CSS)@en[[[overflow]]]] 通常時
,,[[Firefox3]],==,[[Safari3]],==,[[Opera 9.52]],==,[[WinIE7]],==
,,[[無奇癖]],[[奇癖]],[[無奇癖]],[[奇癖]],[[無奇癖]],[[奇癖]],[[無奇癖]],[[奇癖]]
,[CODE(JS)@en[[[documentElement]].[[offset[VAR[*]]]]]],[[border箱]] ([[padding辺]]),==,[[border箱]],==,[[border箱]] ([[margin辺]]),[[border箱]],[[viewport]] [[内容箱]],[[viewport]] [[border箱]]
,[CODE(JS)@en[[[body]].[[offset[VAR[*]]]]]],[[border箱]] ([[padding辺]]),==,[[border箱]],==,==,[[viewport]] [[内容箱]] + [[スクロールバー]],[[border箱]] ([[根要素]] [[margin辺]]),[[viewport]] [[border箱]]
,[CODE(JS)@en[[[documentElement]].[[client[VAR[*]]]]]],[[viewport]],[[padding箱]] ([[border辺]]),[[viewport]],[[padding箱]] ([[border辺]]),[[viewport]],縦: [[padding箱]] ([[border辺]]); 横: [[viewport]],[[viewport]] [[内容箱]] ([[border辺]]),N/A
,[CODE(JS)@en[[[body]].[[client[VAR[*]]]]]],[[padding箱]] ([[border辺]]),[[viewport]],[[padding箱]] ([[border辺]]),[[viewport]]¶,[[padding箱]] ([[border辺]]),[[viewport]],[[padding箱]] ([[border辺]]),[[viewport]] [[内容箱]]
,[CODE(JS)@en[[[documentElement]].[[scroll[VAR[*]]]]]] (Width/Height),[[画布可視域]],[[border箱]],==,==,==,==,[[margin箱]]左上〜[[border箱]]右下,[[viewport]] [[border箱]]
,[CODE(JS)@en[[[body]].[[scroll[VAR[*]]]]]] (Width/Height),[[border箱]],[[画布可視域]],==,==,[[border箱]],[[画布可視域]],(拡張) [[padding箱]],==
,[CODE(JS)@en[[[documentElement]].[[scroll[VAR[*]]]]]] (Top/Left),○,,,,○,,○,
,[CODE(JS)@en[[[body]].[[scroll[VAR[*]]]]]] (Top/Left),,○,○,○,,○,,○

[13] [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]]
共に [CODE(CSS)@en[[[overflow]]: [[scroll]]]] の時
([CODE(CSS)@en[[[overflow]]]] の項を参照。)
,,[[Firefox3]],==,[[Opera 9.52]],==
,,[[無奇癖]],[[奇癖]],[[無奇癖]],[[奇癖]]
,[CODE(JS)@en[[[documentElement]].[[offset[VAR[*]]]]]],[[border箱]] ([[padding辺]]),==,[[border箱]] ([[margin辺]]),[[border箱]]
,[CODE(JS)@en[[[body]].[[offset[VAR[*]]]]]],[[border箱]] ([[padding辺]]),==,[[border箱]],[[viewport]] [[内容箱]] + [[スクロールバー]]
,[CODE(JS)@en[[[documentElement]].[[client[VAR[*]]]]]],[[viewport]],[[padding箱]] ([[border辺]]),[[viewport]],縦: [[padding箱]] ([[border辺]]); 横: [[viewport]]
,[CODE(JS)@en[[[body]].[[client[VAR[*]]]]]],☆[[padding箱]] 可視部 ([[border辺]]),==,[[padding箱]] 可視部 ([[border辺]]),[[viewport]]
,[CODE(JS)@en[[[documentElement]].[[scroll[VAR[*]]]]]] (Width/Height),[[画布可視域]],[[border箱]],☆※,[[border箱]]
,[CODE(JS)@en[[[body]].[[scroll[VAR[*]]]]]] (Width/Height),☆[[padding箱]] 内容,==,==,[[画布可視域]]
,[CODE(JS)@en[[[documentElement]].[[scroll[VAR[*]]]]]] (Top/Left),○,,○,
,[CODE(JS)@en[[[body]].[[scroll[VAR[*]]]]]] (Top/Left),,☆,,○

[12] 
凡例:
-明記していないものはその[[要素]]自体が基準。
-括弧内は座標原点 (左上隅)。括弧省略時はその対象物の左上隅が原点。
- [CODE(DOMa)@en[[[scrollTop]]]]/[CODE(DOMa)@en[[[scrollLeft]]]] は、 [[viewport]] 
の[[スクロールバー]]の状態を反映するか否か。
- ※: [[画布]]上の[[箱]] ([CODE(CSS)@en[[[absolute]]]] は含むが、
[CODE(CSS)@en[[[fixed]]]] は含まない。) の [[border箱]]をすべて包含する[[箱]]。
- ☆: 2表の異なり。
- ¶: top、left に [CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[border-top-width]]]]、
[CODE(CSS)@en[[[border-left-width]]]] を加算。

[10]
注意:
-[[WinIE]] の [[viewport]] には [[border箱]]と [[内容箱]]がある。
-それ以外のブラウザの [[viewport]] は原則として[[内容箱]] ([[スクロールバー]]を含まない) を指す。
-[[画布可視域]]: [[画布]]のうち、使用されている[[正]]の領域。
-[[Safari]] の[[奇癖モード]]は [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]]
の[[箱]]を [[viewport]] にあわせて伸張する ([[次元]]を明示していない場合)。
-拡張 [[padding箱]]: [[WinIE7]] の[[奇癖モード]]では [CODE(HTMLe)@en[[[body]]]]
の [CODE(CSS)@en[[[border]]]] が [[viewport]] の [CODE(CSS)@en[[[border]]]]
になる。[CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[margin]]]] + [CODE(CSS)@en[[[border]]]] + [CODE(CSS)@en[[[padding]]]] の領域は [CODE(CSS)@en[[[padding]]]] のように扱われるので、これを拡張 [[padding箱]]と呼ぶ
([CODE(CSS)@en[[[border]]]] に相当する部分は描画されない; [CODE(CSS)@en[[[margin]]]] に相当する部分にも背景色が塗られる)。
[CODE(HTMLe)@en[[[html]]]] の [CODE(CSS)@en[[[padding]]]] より外側は無視される。

* [CODE(HTMLe)@en[body]] 外の要素だとどうなるか?

[5] [CODE(HTMLe)@en[[[html]]]] [[要素]]に [CODE(DOMm)@en[[[appendChild]]]] してみた。
<https://suika.suikawiki.org/~wakaba/-temp/test/dom/element/cssom/offset/>
の offset-*-html-child-*。

[6] [CODE(DOMa)@en[[[offsetParent]]]]:

- [[Firefox]]3: [CODE(HTMLe)@en[[[body]]]]
- [[Opera]]9、[[WebKit]]: [CODE(JS)@en[[[null]]]]
- [[WinIE7]]: [CODE(JS)@en[[[null]]]] (ただし、
[CODE(HTMLe)@en[[[html]]]] に [CODE(DOMm)@en[[[appendChild]]]]
した次の[[レンダリング]]の時点で変なエラーが出る。)

[[奇癖モード]]の場合や [CODE(HTMLe)@en[[[html]]]] に
[CODE(CSS)@en[[[background-color]]]] を指定した場合でも変わらず。

[7] [CODE(DOMa)@en[[[offsetTop]]]]、[CODE(DOMa)@en[[[offsetLeft]]]]:
- [[Firefox]]3: [CODE(CSS)@en[[[top]]]] や [CODE(CSS)@en[[[left]]]] の値。
- それ以外: [CODE[[[0]]]]。

[9] ちなみに [CODE(DOMm)@en[[[getBoundingClientRect]]]] なら [[Firefox3]]、
[[Opera9]] 共正しい値が取れます。

* 関連

[8] [CODE(DOMm)@en[[[getClientRects]]]], [CODE(DOMm)@en[[[getBoundingClientRect]]]]
というのもあります。

[14] [CITE@en[''''''[''''''cssom-view'''''']'''''' Web compatibility of float return values for offsetWidth/Height]]
( ([[Boris Zbarsky]] 著, [TIME[2014-07-03 00:21:25 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2014Jul/0035.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)