素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

getBoundingClientRect()を使って要素の絶対座標を求める

追記:どうやらnowa サービス終了のお知らせで既出だった模様。

ページが見つかりません | Mozilla Developer Networkを使って簡単に、絶対座標を得ることができる。
offsetParent辿っていってoffsetWidth足したりしなくていいので手軽。

function getElementPosition(elem){
  var position=elem.getBoundingClientRect();
  return {
    left:Math.round(window.scrollX+position.left),
    top:Math.round(window.scrollY+position.top)
  }
}

getElementPosition(document.links[5])

getBoundingClientRect()で返ってくるプロパティは、小数になる場合があるのでMath.roundで丸める必要がある。
leftとtopは現在のスクロール位置を基準にするので、window.scrollX,window.scrollYを足すと、ドキュメント全体からの絶対位置を取得できる。