javascript初心者です。

質問

javascript初心者です。

特定要素の相対座標位置を取得したく、getBoundingClientRect()を使用しているのですが、firefox2.0でも、見れるようにしなくてはいけなくて、その場合、getBoundingClientRect()がfirefox2.0では使えません。

それに変わる関数などを探していましたが、わからなかったので、下記のソースを
var element = document.getElementById("sample");
var elementY = element.getBoundingClientRect()

以下のように変えてみました。
var element = document.getElementById("sample");
var elementY = element.offsetTop - window.screenY;

ですが、予期した値が取得できません。
ページ内で、スクロールすると、elementYが変わるようになっています。

どう書き換えたらよいか、どなたかご教授お願いいたします。

回答No.2

yyr446 · ベストアンサー

↓が結構、簡潔にまとめられてるので、参考になるかも..

http://cpplover.blogspot.com/2009/06/dom-level-3.html

お礼

今回、自分が直接書いたコードとは、少し異なりましたが、紹介頂いたページもヒントになりました。ありがとうございました。

回答No.4

think49

下記URLが参考になると思います。

エレメントの座標取得 ～スクロール要素～ - 左脳Script
http://n-yagi.0r2.net/script/2009/06/post_14.html
anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について
http://hkom.blog1.fc2.com/blog-entry-503.html
エレメントの大きさと位置を測定する
http://msdn.microsoft.com/ja-jp/library/Cc392317

.1 The offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight attributes - CSSOM View Module
http://www.w3.org/TR/cssom-view/#offset-attributes
element.offsetTop - MDC
https://developer.mozilla.org/en/DOM/element.offsetTop
offsetTop Property (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/en-us/library/ms534303%28VS.85%29.aspx
element.offsetLeft - MDC
https://developer.mozilla.org/en/DOM/element.offsetLeft
offsetLeft Property (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/en-us/library/ms534200%28VS.85%29.aspx

お礼

ありがとうございます。なんとか、解決しました。感謝感謝です。

回答No.3

神崎 渉瑠（@taloo）

何を基準にした相対座標ですか？

親要素を基準にしているなら、
element.offsetTopか
element.clientTop-element.parentNode.clientTopで良いと思います。
http://msdn.microsoft.com/ja-jp/library/cc391784.aspx?ppud=4
http://msdn.microsoft.com/ja-jp/library/cc392317.aspx?ppud=4

JScriptですが、多くのブラウザがサポートしています。
border-widthの扱いにブラウザ依存があるようですので、borderを付けている場合は注意が必要です。
position:absoluteになっていると、offsetTopかclientTopのどちらか（または両方）が不定になるようで、上手く取得できませんでした。
style.topやstyle.leftを指定せずに、position:absoluteを指定したときに要素の位置を取得できる方法があれば私も知りたいです。

お礼

すみません、なぜかわかりませんが、昨日は、お礼する、補足するで、コメントが書き込めず、遅くなりました。

相対指定は、ユーザーが見ているブラウザの（ツールバーなどを除く）可視領域の左上を基準とした位置を基準としています。なので、縦にスクロールすれば、基準位置は変わります。わかりますでしょうか。

で、結局、自分でも調べた結果、

object.offsetTop - window.pageYoffset

これで、firefox2にも対応して、object.getBoundingClientRect()に変わる値が取得できました。
borderに関することは知りませんでした。ぜひ参考にさせていただきます。

回答No.1

fujillin

そのようなメソッドも知らない、初心者ですが…

getBoundingClientRect()はfx3からの機能みたいですね。
　https://developer.mozilla.org/Ja/DOM/Element.getBoundingClientRect

このあたりを参考に見てみると
　http://jsgt.org/mt/archives/01/001003.html

このへんがあやしそう （仕様の違いは確認してません）
　https://developer.mozilla.org/en/DOM/document.getBoxObjectFor

お礼

とても、すばやい回答をありがとうございました。なんとか解決しましたが、ブラウザで、使える使えない関数があるというのは、今回かなり思い知らされました。