オブジェクトの座標位置の取得
- オブジェクトの座標位置を取得する方法について
- 指定した要素の座標位置を取得する方法について質問があります
- id='3'の要素の座標位置をbodyから取得する方法について
- ベストアンサー
オブジェクトの座標位置の取得
お世話になります。 苦労されている方が多いの検索をすると多くかかりますが、やはりわかりません。 それで、質問させてもらいました。 何とかよろしくお願いいたします。 <body> あああああああああああ <div id="2"> いいいいいいいいいい <div id="3"> ううううううううううううう </div> いいいいいいいい </div> </body> の様な場合、内側の<div>のy座標、x座標の絶対座標－<body>からの座標 を取得することがどうもできません。 Div3Obj=document.getElementById('3'); alert('Div3Obj.offsetTop='+Div3Obj.offsetTop); とすると、id='2'の<div>からの相対位置を取得してしまいます。 <body>からの位置を取得できないものでしょうか。 よろしくお願いいたします。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
function offsetTop(e){ var t = 0; while(e){ t += e.offsetTop; e = e.offsetParent; } return t; } function offsetLeft(e){ var l = 0; while(e){ l += e.offsetLeft; n = e.offsetParent; } return l; }
関連するQ&A
- 画像の座標位置取得
javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…） マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい） 例えば… function lyrGetTop(lyr){ return( parseInt( document.getElementById(lyr).style.pixelTop ) ); } で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。 どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？ それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。 <html> <head> <title></title> <script language="JavaScript"><!-- y = 450; interval = 20; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="setInterval('moveBall()',1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/> </body> </html> これだと、連射どころか、二回目のクリックに反応すらしないんです…。 どうかご教授お願いします。
- ベストアンサー
- JavaScript
- ｐｈｐでタグの座標位置を取得することができるでしょうか
いつもお世話になります。 JavaScriptでならe.offsetTopで取得できますが、 phpでも同様なことはできないでしょうか。 $strHtml='<div id="abc">あああああ</div>'; print($strHtml); この後で、id="abc"の座標位置を取得して、 phpで、その値を使用して更に次のスクリプトを記載するなんてことはできないものでしょうか。 座標位置自体ブラウザが表示して初めて決まるものなのでそもそも無理なのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- PHP
- objectの座標が取れない。
JavaScriptを利用して、画面に仕込んだタグをポップアップのように 呼び出したいと思っています。 以下、概略ですが <div id ="test1" style="display:none;">テスト</div> <a href="javascript:balOpen(this,number)">呼び出し</a> 以下js function balOpen(obj,number) { document.getElementById('test' + number).style.display = 'block'; var positionX; var positionY; positionX = getLocation(obj, 'X'); positionY = getLocation(obj, 'Y'); } 画面をスクロールした際でも、画面中央に出したいので、座標を見て tes1のleftとtopを調整したいと思っています。 しかし、上記のような書き方をしても、X、Yの座標が取れず困っています。 何か良いやり方があれば教えていただけないでしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- オブジェクトの位置
さっそくですが、 <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タグ）からの相対位置を返すようでうまくいきません。 なんと説明してよいのか分からず、分かりにくい質問で恐縮です。よろしくお願いします。
- ベストアンサー
- JavaScript
- アンカー座標の取得ができず、スクロールしない。
Q&Aサイトを作成しています。 Q1の答えにある「こちら」をクリックしたら、Q20の答え部分を表示させるように作成しています。 実際には質問数が多く、Q20の答え部分までスクロールさせたいので、 アンカーを設定した座標を y = obj.offsetTop; で取得しているつもりなのですが、 うまくスクロールされません。 どこが間違っているのか教えて頂けないでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- function ShowAanswer(n) { var target = document.getElementById('answerbox'+n); if( target.style.display != "block" ) { target.style.display = "block"; } else { target.style.display = "none"; } } function AnswerOpen(id_place){ obj = document.getElementById(id_place).click(); y = obj.offsetTop; scrollTo(0,y); } // --> </script> <title>TEST</title> </head> <body> <dl> <dt onclick="ShowAanswer(1)">Q1. 質問</dt> <dd id="answerbox1" onclick="ShowAanswer(1)">Q1の答え<br /><a href="JavaScript:AnswerOpen('kotae')">こちら</a>を参照してください。</dd> </dl> <dl> <dt onclick="ShowAanswer(2)">Q2. 質問</dt> <dd id="answerbox2" onclick="ShowAanswer(2)">Q2の答え</dd> </dl> <dl> <dt onclick="ShowAanswer(3)">Q3. 質問</dt> <dd id="answerbox3" onclick="ShowAanswer(3)">Q3の答え</dd> </dl> <dl> <dt onclick="ShowAanswer(4)">Q20. 質問</dt> <dd id="answerbox4" onclick="ShowAanswer(4)"><a id="kotae">Q20の答え</a></dd> </dl> </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
- 座標を取得して、後でその位置までスクロールさせる？
「詳細を表示」ボタンをクリックして非表示にしていたレイヤーを表示し、 表示されたレイヤー内の「詳細を閉じる」をクリックして非表示にするものを作りました。 レイヤーを非表示にした時に、ページのスクロール位置を 「詳細を表示」ボタンをクリックした時の位置に戻したいのですが どのようにすればできるのでしょうか。 （下のソースには関係する部分だけ抜き出してますが、実際にはページ内にいろんな情報が載っていて、非表示にした時に中途半端な位置にスクロールされた状態になってしまうと元いた場所がわからなくなってしまうので、元の場所に戻したいのです・・） 「詳細を表示」ボタンをクリックした時のY座標を取得して、詳細を閉じた時にそのY座標まで「詳細を表示」ボタンがくるようにスクロールさせる？？？とか考えて、それっぽいものを書き加えたりしてみたのですが、知識がなさすぎて全く上手くいきません…。 どなたかご教授くださいませんでしょうか。 よろしくお願いいたします。 <script type="text/javascript"> <!-- function Hyo(id, visible) { var style = (visible ? 'block' : 'none'); document.getElementById(id).style.display = style; } // --> </script> <a href="#" onclick="Hyo('cont1', 1)"><img src="images/button.gif" alt="詳細を表示" width="45" height="20" border="0" /></a> <div id="cont1"> 文章が入る（～中略～）文章が入る <a href="#event" onclick="Hyo('cont1', 0)">詳細を閉じる</a> </div>
- ベストアンサー
- JavaScript
- googlemap api での 座標の取得
googlemap apiを使って地図上をクリックしたところに 吹き出しをつくり、その中のフォームに情報を入力するという ページを作成してます。 が、うまく座標がとれません。 GEvent.addListener(map, 'click', function(overlay, point) { if (point) { document.getElementById("show_x").innerHTML = point.x; document.getElementById("show_y").innerHTML = point.y; map.openInfoWindowHtml(point,"<form><tableborder=1><tr><td><input type=text id=\"show_x\"><input type=text id=\"show_y\"></td></tr>); としていますが、show_x show_y が <input type=text value=***> のところに 入りません。 <body> 緯度<p id="show_x"></p> 経度<p id="show_y"></p> </body> のところには表示されます。
- 締切済み
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
- ソースの初歩的な質問です
スタートを押下したら、alertの"消します""出します"の通りに、 obj.gifが反応するようにするソースを作成したいです。 以下のソースでは対象オブジェクトが見つからないという エラーが返ってきてしまいます。 どの様に修正すればよいのか教えてください。 宜しくお願い致します。 <html> <head> <script type="text/JavaScript"> function Start(lyrball) { alert("消します"); document.getElementById(lyrball).style.visibility = "hidden"; alert("出します"); document.getElementById(lyrball).style.visibility = "visible"; } </script> </head> <body> <a href="JavaScript:Start()">スタート</a> <div id="lyrball"> <img src="obj.gif"> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
yuu_xさん、今晩は。 早速教えていただきありがとうございました。 できました。 ばっちりです。 offsetTop()をこの様に使うとは、 このような使い方はまだまだマスターできません。 参考になりました。 ありがとうございました。