jQueryのoffset()を使ってタグ要素の現在位置(px)を取得表示する方法をご紹介します。
現在位置を取得し、animate等を使って移動させる時に使えます。
Contents
ディスプレイ広告
offset()を使ってタグ要素の現在位置(px)を取得表示するCSS記述
※取得するタグ要素(class=”iti”)のCSS記述です。必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:center; font-weight:normal; padding:10px 0; position: relative; } .iti{ position: absolute; width: 50px; height: 50px; background-color: #cccccc; top: 100px; left: 200px; } </style>
offset()を使ってタグ要素の現在位置(px)を取得表示するHTML記述
※現在位置を取得する要素タグ(class=”iti”)を用意します。必要に応じて変更して下さい。
<h1>四角グレーのdiv要素タグ(class="iti")の現在位置をpタグに表示します</h1> <p></p> <div class="iti"></div>
jQueryのoffset()でタグ要素の現在位置(px)を取得するJavaScriptの記述
※jquery-2.2.0.min.jsファイルを読み込みます。offset()でclass=”iti”タグの現在位置を取得し、その取得位置をpタグに表示させます。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var iti = $(".iti"); var offset = iti.offset(); $("p").html( "四角グレーの場所はtop:" + offset.top + "px、left:" + offset.left+"pxです。"); }); </script>
タグ要素の現在位置(px)を表示するデモページ
タグ要素の現在位置(px)を表示するデモ
※流用される場合は自己責任でお願いします。