![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
オブジェクトの座標位置を取得する"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>
No.2ベストアンサー
- 回答日時:
#1>・座標を求める対象物にはIDを振る必要があるのに、それがなかった
そうです。
プログラムの
var el=document.getElementById(id);
の部分で、エレメントの特定をしていますが、
これは、エレメントに振られたidを元にする特定するメソッドです。
なので、このプログラムの場合、idを渡してやる必要があり、したがってエレメントにidを振っておく必要がありました。
エレメントの特定方法は他にも色々あります。
例えば、質問の例であれば
document.fm_test.testText
としても特定できます。
(つまり
var el=document.getElementById(id);
は、
var el=document.fm_test.testText;
に置き換えられます。
)
ただ、一般的に、
id は、ほとんど全てのエレメントに振ることができますが、
name は、一部のエレメントにしか振ることができません。
また、id は、定義からは、そのページに唯一1つとなっていますから、エレメントを特定するのにgetElementById を使って直接決定できます。
つまり、このような場合に、必ずしもidを使わなければならないというわけではないが、idを使った方法の方がより汎用性があると言えると思います。
#1>・座標を求める対象物がロードされる前に、座標を取ろうとしていた
そうです。
今回の場合、座標計算を呼び出し設定するスクリプトの位置が<td>の中にありました。
つまり、その場合、<td>も<tr>も<table>もいわば作りかけの状態であり、(少なくとも)完成したオブジェクトではありません。
ブラウザがその構成要素の配置を計算する時、
どのタイミングで、構成位置を計算するかはブラウザによって異なるでしょうが、未完成の部品を配置していっている途中ではその位置を確定できてなくてもしょうがないと思います。
(というか、確定できない部分が多いのでむしろ確定できない(ブラウザの動作として途中ではしない)のが一般的じゃないかなと思います、逆にimg エレメントのwidth やheight のように、指定してやると(画像を実際に読込終わるより)早くに確定できる情報もあります)
No.1
- 回答日時:
プログラムは、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を振る必要があるのに、それがなかった
・座標を求める対象物がロードされる前に、座標を取ろうとしていた
という認識であっていますか?
お手数ですが、お返事いただけると嬉しいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
任意の座標をクリックさせるには
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
<a>タグのテキストを取得
-
文字を点滅させるスクリプト ...
-
ページ先頭にスムーズに移動(...
-
重複しないくじの作り方がわか...
-
ActiveXobjectが作成できない
-
Enterで次の入力項目へ進むには?
-
関数でy=g(x)のgとは何の略です...
-
functionから別のfunctionを実...
-
JAVASCRIPTで万年カレンダーを...
-
Coinmarketcap api
-
FireFoxのjavascriptで自動でキ...
-
JavaScriptでテーブル内?に矢...
-
undefinedを表示させない方法は...
-
ジェネレーターの作り方
-
Null またはオブジェクトではあ...
-
HTMLで作った時報アプリが動き...
-
Javascriptで定期的にF5を押す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
div要素内の全input要素をdisable
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
テキストボックスがブランクの...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報