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 回答日時： 2010/10/21 09:19

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

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

この回答へのお礼

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

お礼日時：2010/10/24 06:58

No.4 回答者： think49 回答日時： 2010/10/22 16:04

下記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.off …
offsetTop Property (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/en-us/library/ms534303 …
element.offsetLeft - MDC
https://developer.mozilla.org/en/DOM/element.off …
offsetLeft Property (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/en-us/library/ms534200 …

この回答へのお礼

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

お礼日時：2010/10/24 06:58

No.3 回答者： taloo 回答日時： 2010/10/21 10:27

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

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

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

この回答へのお礼

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

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

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

object.offsetTop - window.pageYoffset

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

お礼日時：2010/10/22 18:04

No.1 回答者： fujillin 回答日時： 2010/10/20 18:56

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

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

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

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

この回答へのお礼

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

お礼日時：2010/10/24 07:00