![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
オブジェクトの座標位置を取得する"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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Click回数を数え、規定された回...
-
重複しないくじの作り方がわか...
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
HTML:Tableタグに対し、JavaScr...
-
Enterで次の入力項目へ進むには?
-
innerHTML実行後のイベント
-
javascript 特定のタグのidの存...
-
オブジェクトがありません
-
javascriptであるボタンを押す...
-
RadioButtonListの表示制御
-
javascript/他ページ内リンク...
-
IE8でdivのcontenteditable=tru...
-
Javascriptの変数の中に変数を...
-
onchangeイベントを使ってspan...
-
appendChildがieだとできない??
-
JavaScriptのメモ帳アプリ編集...
-
javascriptで自動計算フォーム...
-
ジャンル別にランダム画像を表...
-
google apps scriptの終了のさせ方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
任意の座標をクリックさせるには
-
javascript 特定のタグのidの存...
-
onchangeイベントを使ってspan...
-
HTML:Tableタグに対し、JavaScr...
-
モーダルダイアログウィンドウ...
-
日本語入力の禁止
-
javascriptでCSVを呼出しvlookup
-
Click回数を数え、規定された回...
-
画像上のクリックした場所が分...
-
【Tabキー】特定の範囲内だけで...
-
配列の大括弧と丸括弧はどう違う?
-
重複しないくじの作り方がわか...
-
javascriptで、表示されている...
-
div要素内の全input要素をdisable
-
javascriptであるボタンを押す...
-
javascriptで自動計算フォーム...
-
RadioButtonListの表示制御
おすすめ情報