オブジェクトの位置
- HTMLページ内のオブジェクトの位置を取得する方法について説明します。
- offsetTopやoffsetLeftでは親要素からの相対位置を返すため、特定のオブジェクトの絶対位置を取得することはできません。
- オブジェクトの絶対位置を取得するためには、getBoundingClientRectメソッドを使用する必要があります。
- ベストアンサー
オブジェクトの位置
さっそくですが、 <html> <head> </head> <body> <table> <tbody> <tr> <td></td> </tr> <tr> <td><input type="text" id="text1"></td> </tr> </tbody> </table> </body> </html> このようなページでbodyの中での「text1」オブジェクトの位置の取得方法を教えてください。offsetTopやoffsetLeftでは親要素（この場合trタグ）からの相対位置を返すようでうまくいきません。 なんと説明してよいのか分からず、分かりにくい質問で恐縮です。よろしくお願いします。
- akomot
- お礼率96% (200/207)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
offset じゃないやつでならすぐ求まると思うけど… http://www.tohoho-web.com/js/event.htm#screenXe http://www.tohoho-web.com/js/event.htm#screenXn ブラウザ依存対応が面倒かも・・・
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
http://www.tohoho-web.com/css/reference.htm#left javascriptでこの辺りのstyleを取り出してみるとか・・・
お礼
返事が遅くなり申し訳ございません。 styleも試してみたのですがうまくいきませんでした。 結局body内の要素をループして取得しそれぞれの親要素の位置を足していくことで位置を取得する方法をとることにしました。効率的ではないかもしれませんが，とりあえずそれなりに取得できているようなので・・・。 今回は参考になるページを紹介していただきありがとうございました。
関連するQ&A
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- TABLEタグ内に入った項目の座標取得について
オブジェクトの座標位置を取得する"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>
- ベストアンサー
- JavaScript
- formのtextの文字色を変えたい
JavaScriptで１page目で指定したパラメータを2page目で別のフォーム内のtextボックスに記入する際、他にも作るテキストボックスと違う文字色にしたいのですが、方法が判りません。そもそもそんなことできないのでしょうか？ ------- 1page目 ------- <html> <head> <title>別ページのフォームにパラメータを送る</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5" width="80"> <tbody><tr> <td align="center"> <input type="button" onClick="location.href='form2.html?No.001'" value="セット"></td> <td align="center"> <input value="閉じる" onClick="window.close()" type="button"> </td> </tr> </tbody> </table> </body> </html> ----- 2page目 ----- <html> <head> <title>別ページからのパラメータをフォームに書き込む</title> <script language="JavaScript"> <!-- function pdata() { para= location.search; para = para.substr(1,6); document.myform.number.value=para; } //--> </script> </head> <body onLoad="pdata()"> <table border="1" cellpadding="2" cellspacing="2" width="150"> <tbody> <form name="myform" method="post"> <TR> <TD >番 号</TD> <TD ><input name="number" type="text" id="番号" size="15" /></TD> </TR> </form> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- 画面表示が100％になりません。
<table>でいろいろやっている内に、画面表示が100％にならず、周囲1％程度の余白ができてしまいました。 外部CSSを併用したためか、と思いはずしてみても変わりません。(cssでもそのような記述はしていません。）どこを修正すればよいのでしょうか？ どなたかご指導お願い致します。 <html> <head> <title>＊＊＊</title> <link href="css/css" rel="stylesheet" type="text/css"> </head> <body > <TABLE border="0" width="100%" height="100% " bgcolor="#000000"> <TBODY> <tr> <td align="center"> <TABLE border=2 width="480" height="480" bgcolor="#222222" bordercolor="#000000" > <TBODY> <tr> <td align="center"> 省略 </td> </tr> </TBODY> </TABLE> <p align="center"></P> </td> </tr> </TBODY> </TABLE> </body> </html>
- ベストアンサー
- HTML
- ホームページ上に「文字サイズ大」ボタンのつけ方
ホームページ上に「文字サイズ大」のボタンをつけたいと思い、下記のように書きました。 基本の文字サイズは決めています。 「文字サイズボタン」を押すと、少し大きくしたいのですが、bodyは大きくなりますが、table内の文字は変わりません。 他にも「h1」「p」もあるのですが、どうしたらいいでしょうか？ ぜひ、教えてください。 よろしくお願いいたします。 ------------------------------------------------------------- <style type="text/css"> <!-- body,h1,table,p,{font-size:13px;} --> </style> <script type="text/javascript"><!-- function large() { document.body.style.fontSize = "100%"; } //--></script> </HEAD> <BODY><INPUT type="button" onclick="large()" value="文字サイズ「大」"> <BR> <BR> あああああああああああああああああああああああああああああああ <TABLE border="1"> <TBODY> <TR> <TD>ああああ</TD> <TD width="111">あああああああ</TD> </TR> </TBODY> </TABLE> </BODY>
- 締切済み
- JavaScript
- このフレームを直してもらいたいのですが
わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― ｜ | ｜ | ここがない→ ｜_＿＿＿＿＿＿＿ |＿＿＿＿＿＿＿＿＿＿ ｜ | ｜ | ｜＿＿＿＿＿＿＿__＿＿＿＿＿＿＿＿＿＿| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか？ ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>
- ベストアンサー
- HTML
- avaSprictを使ってcookieに保存できるようにしたい
JavaSprictで動かす計算式を作りました。 見よう見まねで初めて作ったので色々と変なところがあるかもしれませんが とりあえず動作はOKな状態になっています。 HTMLソースと、jsファイルの中身は下記のようになっているのですが このファイルのINPUT1とINPUT2、プルダウン1とプルダウン2の内容を JavaSprictを使ってcookieに保存できるようにしたいです。 jsファイルをどのようにすれば良いでしょうか？ できれば、Saveボタンのようなものが無い状態で cookieを削除するまでずっと保存できる形にしたいです。 【HTMLソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <SCRIPT type="text/JavaScript" src="test.js"> </SCRIPT> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE> test </TITLE> </HEAD> <BODY onload="SetTarget()"> <P> test </P> <TABLE> <TBODY> <TR> <TD> INPUT1 </TD> <TD> <INPUT type="text" value="200" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> <TR> <TD> INPUT2 </TD> <TD> <INPUT type="text" value="500" size="11" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <TABLE border="1"> <TBODY> <TR> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン1 </OPTION> <OPTION value="1.4">P1-1 </OPTION> <OPTION value="1.5">P1-2 </OPTION> </SELECT></TD> <TD><SELECT onchange="Calc()"> <OPTION value=",">プルダウン2 </OPTION> <OPTION value="1.2">P2-1 </OPTION> <OPTION value="1.3">P2-2 </OPTION> </SELECT></TD> </TR> </TBODY> </TABLE> <HR> <SELECT onchange="ListSel(this.value)"> <OPTION value=",,"> リスト </OPTION> <option value="100,30,100"> リスト2 </option> <option value="1220,60,80"> リスト3 </option> </SELECT> <TABLE border="0" cellpadding="3" cellspacing="1"> <TBODY> <TR> <TD bgcolor="#FFFFFF"> 1 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 2 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> <TD bgcolor="#FFFFFF"> 3 <INPUT type="text" size="11" value="" onkeyup="NumOnly(this);Calc()"> </TD> </TR> </TBODY> </TABLE> <HR> <B> Ans </B> <TABLE border="1"> <TBODY> <TR> <TD>Ans1</TD> <TD>Ans2</TD> <TD>Ans3</TD> </TR> <TR> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> <TD><INPUT type="text" size="11"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- JavaScript
- ボタンを押してテキストボックスを追加しテーブルの作成
avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>
- ベストアンサー
- JavaScript
- htmlの表を調整したい
以下のようなコードの時、「c」がはみ出てしまいます。 訳あってrowspanは外せませんが、「2」と「b」を重ねて表示したいです。 どの様にしたらよいでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <table border=""> <tbody> <tr> <td> 1 </td> <td rowspan="2"> 2 </td> <td> 3 </td> </tr> <tr> <td> a </td> <td> b </td> <td> c </td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
お礼
早速ありがとうございます。 試してみたのですが、これだとマウスポインタの座標を取得しているようです。実は、やりたいことというのが、テキストボックスのkeydownイベントが発生したときにそのテキストボックスの下にdiv要素でメッセージを表示するという処理なのです。