HTML要素のサイズや位置を取得する

エントリイ内JavascriptExercise

• エントリイ内 Javascript Exercise 関連エントリイ一覧 in this Blog
• offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について（2007/06/27完）
• offset○○○ 関連エントリイ一覧 in this Blog
• 「イベント」関連エントリイ in this Blog
• Javascript演習ページ(1)通常配置要素の高さ取得
  【エントリイ外のオリジナルページ】(2007/06/24完)

1-2 任意の要素の画面上の位置、幅、高さ等の諸属性を取得する

何らかのイベント発生に対応して、或る位置に文字や画像を表示したいことは沢山ある。その場合には当然乍ら、その表示位置を指定する必要がある。そしてその表示位置はイベント発生要素が持つ諸属性値の関数として、つまりイベント発生要素の位置・幅・高さの関数として設定することが出来るはずである。

そこでまずイベント発生要素の位置、サイズ等を取得してみる。

イベント発生要素の位置と大きさを取得できれば、position absolute属性を持つ要素にも、また通常のストリーム内にある要素にも、あるいはposition relative属性を持つ要素にも、全ての表示に利用することが出来るし、言わずもがなであるがpopup表示にも活用できる。

試験内容

次の文字列（p要素）にmouseoverすると、p要素の位置属性等を各テキストフィールド内に表示する。

sizes & positions of this element

offsetプロパティによって位置やサイズを取得してみた。ここでもまた、IEとGekkoではoffsetParentが全く異なる概念であることに悩まされなければならなかった｡ _(･･;φｳｯ･･･

tagName :

マウス座標 x :

マウス座標 y :

この要素幅：offsetWidth :

この要素高：offsetHeight :

(IEは第1)offsetParentのtagName（FFはbody） :

(IEは第1)offsetParentのID （FFはbodyのID）:

(IE)第1offsetParent上の、(FF)body上のx座標:

(IE)第1offsetParent上の、(FF)body上のy座標:

(IE Only)第2ParentのtagName :

(IE Only)第2ParentのID :

(IE Only)container上のx座標 :

(IE Only)container上のy座標 :

(IE Only)第3ParentのtagName :

(IE Only)第3ParentのID :

(IE Only)body上のx座標 :

(IE Only)bpdy上のy座標 :

コメント

1. mouse位置については、Javascript外部ファイル内で取得関数を設定している。

2. IEでは第1offsetParent、第2offsetParent、・・・と階層構造を為すが、Firefox の場合にはoffsetParentは唯1つ（body要素）しかないことが試行錯誤の結果やっと解明できた。(^。^;)フウ〜。

   同じプロパティ名でこれ程に概念が異なるとは全く厄介なことである。そのことを試行錯誤して解明するのに丸々1日掛かってしまった！

   世に出回っているJavascript解説本で、offsetParentについて正確に記述したものはあるのだろうか？ 少なくとも手持ちの数冊の書籍では記述があっても誤っているか、あるいは全く記述がなかった。

3. IEにおけるoffsetParentは極めて扱いにくい。それは上位要素parentElementとイコールではなく、一定の条件下にある上位要素がoffsetParentになるらしい。その一定の条件については、「offsetParentとparentElement」に詳述されている。

4. 結論として、IE以外では任意要素の位置はoffsetLeftとoffsetTopで容易に取得できる。(2007/06/27追記：←この記述は間違いだった。Opera9は簡単にoffsetLeft,同Topによって要素の位置を取得出来るが、FF2.0.0.4でもoffsetLeft等だけでは正確な絶対位置や取得できない。詳細は offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法についてに記述した。）　しかし、IEにおいてはHTML文上でoffsetParentの階層構造を解析し、しかもparentElementの内、どれがoffsetParentなのかも特定し、しかる後にbody要素からのoffsetLeft値とoffsetTop値を取得しなければならないことになる。非常に煩雑であり面倒で堪らない。もっと簡便な方法はないのだろうか？！IE7という果報を寝て待つか？(苦笑)

   しかし、果たしてそれは果報たり得るのだろうか？

Javascript呼び出しHTML文

<p style="text-align:center" onmouseover="dispSizePos(this)">sizes & positions of this element</p>

エントリイ内インラインJavascript文

<script type="text/javascript"><!-- //エレメント属性取得 function getElementSizePos(which){ 　if (!document.all) { 　var values = new Array( 　　which.tagName, 　　absX,　//頁上の絶対横位置。外部スクリプトでGlobal変数として定義し値を取得。 　　absY, //頁上の絶対縦位置。同上 　　　//p.width p.height 　　which.offsetWidth, 　　which.offsetHeight, 　　which.offsetParent.tagName, 　　(which.offsetParent.id) ? which.offsetParent.id : "未定義",　//body 　　which.offsetLeft, 　　which.offsetTop　//i=8 　); 　} else { 　var values = new Array( 　　which.tagName, 　　absX, 　　absY, 　　　//p.width p.height 　　which.offsetWidth, 　　which.offsetHeight, 　　which.offsetParent.tagName, 　　which.offsetParent.id,　//IEではcolumn1_block 　　which.offsetLeft, 　　which.offsetTop, 　　which.offsetParent.offsetParent.tagName, 　　which.offsetParent.offsetParent.id,　//←container 　　which.offsetLeft + which.offsetParent.offsetLeft, 　　which.offsetTop + which.offsetParent.offsetTop, //body 　　which.offsetParent.offsetParent.offsetParent.tagName, 　　(which.offsetParent.offsetParent.offsetParent.id) ? which.offsetParent.offsetParent.offsetParent.id : "未定義", 　　which.offsetLeft + which.offsetParent.offsetLeft 　　　+ which.offsetParent.offsetParent.offsetLeft, 　　which.offsetTop + which.offsetParent.offsetTop 　　　+ which.offsetParent.offsetParent.offsetTop 　); 　} 　return values; } 　//サイズ等の表示 function dispSizePos(which) { 　var pos = new Array(getElementSizePos(which)); 　for (i=0; i< pos.length ; i++) { 　　if (i < 9 && (pos[i] == null || pos[i] == undefined)) 　　　pos[i] = ""; 　　document.forms[0].elements[i].value = pos[i]; 　} } //--> </script>