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画像ビューア(Fotorama)
タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...