重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【終了しました】教えて!goo新規会員登録

TABLEタグ内に入った項目の座標取得について

解決済

  • 質問者：16tukiya11
  • 質問日時：
  • 回答数：2件

オブジェクトの座標位置を取得する"offsetTop"はTABLEタグ内のものには使えないとありました。
（参考質問URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=1556067）

参考URLの回答例を見ながら、簡単なソースを組んでみたのですが、結果が「0」となってしまい値がとれていません。
（TABLEタグにはいっていなければ取得できます）
何がいけなくてこうなってしまっているのかわからず、大変悩んでいます。
お分かりになられる方、ご教授お願いいたします。
(文字数制限の関係で、インデントがとれてません。みにくくてごめんなさい)
<xmp>
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function absOffsetTopR(el){
if(el.offsetParent.tagName.toLowerCase()=="body"){
return el.offsetTop;
}else{
return el.offsetTop+absOffsetTopR(el.offsetParent);
}
}

function absOffsetTop(id){
var el=document.getElementById(id);
if(el.offsetParent.tagName.toLowerCase()=="body"){
return el.offsetTop;
}else {
return absOffsetTopR(el);
}
}
//-->
</script>
</head>

<body>
<form name="fm_test">
<table name="testTable" border="1" width="150">
<tr>
<td align="center">
<input type="text" size="20" name="testText">
<script language="JavaScript" type="text/javascript">
<!--
zahyo = absOffsetTop("testText");
document.fm_test.elements["testText"].value=zahyo;
//-->
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
</xmp>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

#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 のように、指定してやると（画像を実際に読込終わるより）早くに確定できる情報もあります）
    • good
    • 0
    • 件
通報する
この回答へのお礼

丁寧な回答をありがとうございました！
これできちんと理解することができました。
本当にありがとうございます。

通報する
お礼日時：2006/06/29 13:59

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

プログラムは、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を振る必要があるのに、それがなかった
・座標を求める対象物がロードされる前に、座標を取ろうとしていた

という認識であっていますか？
お手数ですが、お返事いただけると嬉しいです。

補足日時：2006/06/29 09:21
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報