JavaScriptで要素の絶対座標を取得するには、getBoundingClientRectメソッドを、jQueryではoffsetを使えばよい。
JavaScriptでgetBoundingClientRectメソッドを使った例
<div id="main_box"> <div id="sub_box"> <div id="myBox"></div> </div> </div> <script type="text/javascript"> var ele = document.querySelector("#myBox"); var bounds = ele.getBoundingClientRect(); var html = document.documentElement; var body = document.body; var x = bounds.left + (body.scrollLeft || html.scrollLeft) - html.clientLeft; var y = bounds.top + (body.scrollTop || html.scrollTop) - html.clientTop; </script>
jQueryでoffsetを使った例
<div id="main_box"> <div id="sub_box"> <div id="myBox"></div> </div> </div> <script type="text/javascript"> $('#result1').text('getBoundingClientRectでは(' + x +',' + y + ')'); var elm = $('#myBox'); var x = $(elm).offset().left; var y = $(elm).offset().top; </script>
座標取得サンプル
ここの絶対座標値は