jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
2024/02/20
jQueryで指定した要素のposition(leftやtop) / width / heightを取得したかった。また指定する要素はレスポンシブ対応されていたので、ウィンドウ幅によって各値は変わってくる。とりあえず別要素クリック時に、指定要素の各値を取得する方法をメモ。
ソース
#html
<div id="check">調べたい要素</div>
<div id="answer"></div>
#jQuery
$(function(){
$('#check').click(function(){
var offset = $(this).offset();
var check = $(this);
var answer = '\
left:' + offset.left +
'<br>top:' + offset.top +
'<br>width:' + check.width() +
'<br>height' + check.height()
;
$('#answer').html(answer);
});
});
関連記事
-
-
jQuery Nice Selectを特定ページのみ無効にする方法
bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
jQueryのfind実行時に複数のセレクタを指定する方法
jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...
-
-
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...