[1] [CITE[offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js]] ([CODE[2008-11-02 01:56:08 +09:00]] 版) ([[名無しさん]]) [2] [CITE[offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について]] ([[名無しさん]] [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]] 版) [4] [CITE[Offset attributes again - Anne’s Weblog]] ([TIME[2009-01-01 17:18:29 +09:00]] 版) * [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]]]] してみた。 の 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]] 版))