*

jQuery 要素の相対位置

公開日: : 最終更新日:2014/04/05 jQuery, 開発

jQueryを使って要素の相対位置を調べる

Google先生に「jquery offsetLeft」と聞くとほとんどこれ

var offset = $(this).offset();
var left = offset.left();
var top = offset.top();

絶対位置を返却してると思いますが、今知りたいのは相対位置。
何時かの検索エンジンのアップデート(ペンギン?パンダ?)以降、同じ内容の物ばかり陳列されてる気がします。

結論を書くと

var offsetLeft = $(this)[0].offsetLeft;
var offsetTop = $(this)[0].offsetTop;

昔にこの方法でプロパティを取得してブラウザーによって挙動が違い痛い目にあった気がしたのですが。。。?

ちなみにログ出力して中身を調べると大抵の情報が入ってます。

console.log($(this));

ちょっと曖昧な所があるので後で調べ直す必要がありますが、今はメモのみで。

関連記事

droid

Androidで課金アプリ作製 プロセス間通信予習編

Androidで課金アプリ作製 プロセス間通予習編 課金アプリを作成の際にaidlファイルを利用す

記事を読む

server_error_500

Apache 500 Internal Server Error

久しぶりに自宅のローカルサーバーを動かしたら「Server error!」が出てゑっ!? 解決方法

記事を読む

apache -h

Macで ローカルサーバー構築 Apache設定編

Macで ローカルサーバー環境を構築するまで Apache設定編 ネットでの情報は必要最低限しか載

記事を読む

jquery-logo_png

jQuery draggable,resizable 要素のサイズがずれる

uiプロパティ以外で要素のサイズ取得を試みる draggableとresizableを使用し要素の

記事を読む

PHP 5.4.17

Macで ローカルサーバー構築 PHP設定編

Macで ローカルサーバー環境を構築するまで PHP設定編 ネットでの情報は必要最低限しか載ってな

記事を読む

apache -h

Macで ローカルサーバー構築 Apache起動編

Macで ローカルサーバー環境を構築するまで Apache起動編 ネットでの情報は必要最低限しか載

記事を読む

cs06d2.PNG

Androidで課金アプリ作製 サンプルコード(BILLING V3) 起動編

Androidで課金アプリ作製 サンプルコード起動編 課金アプリの制作の機会が来てしまいました。

記事を読む

jquery-logo_png

jQuery Google画像検索風プラグイン

Google画像検索風プラグイン rc_gallery_open こういったプラグインは数多の開

記事を読む

c2

C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り合えずバッファオーバーランを目

記事を読む

jquery-logo_png

jQuery Googleカレンダー風スケジュール表 タイムテーブル

jQueryでスケジュール表もしくはタイムテーブルっぽいもの 仕事でスケジュール管理のシステム開発

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

jquery-logo_png
jQuery 水平スクロール&cssでカスタム可能なスクロールバーなプラグイン

水平スクロール&cssでカスタム可能なスクロールバーなプラグイン j

c
C言語 バッファオーバーランまで 関数の引数ポインタ

関数引数としてのポインタ 今回は関数引数としてのポインタに関して。

c2
C言語 バッファオーバーランまで ポインタ考察編

趣旨 ただC言語を勉強してもモチベーションがあがり辛いので、 取り

droid
Google Cloud Messaging プロジェクトナンバー API Key取得編 2014/07最新版

Google Cloud Messaging プロジェクトナンバー A

jquery-logo_png
jQuery removeClass 特定のクラスを全て削除

特定のクラスを全て削除 フォームを作成した時に、入力項目に不備があっ

→もっと見る

PAGE TOP ↑