[B! JS][座標] shiiiiirのブックマーク

shiiiiir id:shiiiiir

JSと座標に関するshiiiiirのブックマーク (2)

HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。情報ソースこの問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
shiiiiir 2009/11/24
HTML

ブラウザ

JS

座標
リンク
offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js
簡単な定義要素のoffsetLeftプロパティ要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ要素のoffset基準要素(これが何になるかが問題) ○結論から先に見たい方は＞＞こちら＜＜○ いままで、なんとなくoffsetTopやoffsetLeftを使っていました＾＾；これらは「ページ上の要素の位置」を格納してると思って。しかし、よくよく調べてみるとそれは誤りであり、かつかなり複雑でややこしいプロパティであることが分かってきました。*1 もともと、(ここでは述べませんが、offsetHeightとoffsetWidthも含め)offset〜のプロパティはIEがVer5で独自に実装したものらしく、その後他のブラウザが追随して実装したようです
shiiiiir 2009/07/02
JS

座標
リンク
1