勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法

   2024/02/20  jQuery

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

  関連記事

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

jQueryのfind実行時に複数のセレクタを指定する方法

jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...