- ベストアンサー
TABLEタグ内の項目座標取得方法とは？
- TABLEタグ内の項目の座標取得について解説します。
- オブジェクトの座標位置を取得する"offsetTop"はTABLEタグ内のものには使えないようです。
- 参考URLの回答例を元にソースを作成しても、値は取得できないようです。
- 16tukiya11
- お礼率88% (16/18)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1>・座標を求める対象物にはIDを振る必要があるのに、それがなかった そうです。 プログラムの var el=document.getElementById(id); の部分で、エレメントの特定をしていますが、 これは、エレメントに振られたｉｄを元にする特定するメソッドです。 なので、このプログラムの場合、ｉｄを渡してやる必要があり、したがってエレメントにｉｄを振っておく必要がありました。 エレメントの特定方法は他にも色々あります。 例えば、質問の例であれば document.fm_test.testText としても特定できます。 （つまり var el=document.getElementById(id); は、 var el=document.fm_test.testText; に置き換えられます。 ) ただ、一般的に、 id は、ほとんど全てのエレメントに振ることができますが、 name は、一部のエレメントにしか振ることができません。 また、id は、定義からは、そのページに唯一１つとなっていますから、エレメントを特定するのにgetElementById を使って直接決定できます。 つまり、このような場合に、必ずしもｉｄを使わなければならないというわけではないが、ｉｄを使った方法の方がより汎用性があると言えると思います。 #1>・座標を求める対象物がロードされる前に、座標を取ろうとしていた そうです。 今回の場合、座標計算を呼び出し設定するスクリプトの位置が<td>の中にありました。 つまり、その場合、<td>も<tr>も<table>もいわば作りかけの状態であり、（少なくとも）完成したオブジェクトではありません。 ブラウザがその構成要素の配置を計算する時、 どのタイミングで、構成位置を計算するかはブラウザによって異なるでしょうが、未完成の部品を配置していっている途中ではその位置を確定できてなくてもしょうがないと思います。 （というか、確定できない部分が多いのでむしろ確定できない（ブラウザの動作として途中ではしない）のが一般的じゃないかなと思います、逆にimg エレメントのwidth やheight のように、指定してやると（画像を実際に読込終わるより）早くに確定できる情報もあります）
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
プログラムは、id を使って座標を求めようとするエレメントを同定しますからid を振ってやる必要があります。 なので <input type="text" size="20" name="testText"> を <input type="text" size="20" name="testText" id="testText"> のように変更します <script language="JavaScript" type="text/javascript"> <!-- zahyo = absOffsetTop("testText"); document.fm_test.elements["testText"].value=zahyo; //--> </script> の部分が埋め込まれていますけど、 ページのロードが完了してから実行するようにします。 埋め込まれていたスクリプトは削除して <head></head>の中のスクリプトの方に移します 例えば、 function setValue(){ document.fm_test.elements["testText"].value=absOffsetTop("testText"); } のような関数を書きます。 <body onload="setValue()"> のようにして、ページのロードが完了したら実行されるようにします。
補足
ご回答ありがとうございます。 無事、ソースを組めました！ ただ、確認させていただきたいのですが、今回のうまくいかなかった原因としては ・座標を求める対象物にはIDを振る必要があるのに、それがなかった ・座標を求める対象物がロードされる前に、座標を取ろうとしていた という認識であっていますか？ お手数ですが、お返事いただけると嬉しいです。
お礼
丁寧な回答をありがとうございました！ これできちんと理解することができました。 本当にありがとうございます。