[jQuery]特定した要素の高さを取得には

特定の要素のみの高さを取得する方法について書いていきます。

サンプルコード

$(document).on('click', '.Menu_Btn', function() {

    // dataの取得
    var Item_ID = $(this).data('item_id');//Item_ID
    console.log('Item_ID',Item_ID);

    // IDに紐づく、Form_Areaの取得
    var scrollHeight = $('#Form_Area_' +Item_ID).get(0).scrollHeight;
    console.log('scrollHeight',scrollHeight);

    // モーダルの高さで処理を変える
    var Modal_H = 303;

    // もしForm_Areaの高さが303px以下なら高さを80vhにする処理
    if(scrollHeight > Modal_H){
	console.log('303以上です');
	// cssを変更する処理
	$('.Menu_Select_Wrap').css('height','100vh');
    }else{
	console.log('303以下です');
	// cssを変更する処理
	$('.Menu_Select_Wrap').css('height','70vh');
    }
});

高さを取得したい要素にdata属性を持たせる

今回は「item_id」と値をつけたdata属性にItem_IDを設定します。

data-item_id="<?= $Item_ID ?>">

dataの取得

クリックすると要素に設定されているItem_IDを取得することができます。

var Item_ID = $(this).data('item_id');//Item_ID

Item_IDに紐づく、Form_Areaの取得

overflow:scrollを適用したスクロールできる要素の高さを取得する

var scrollHeight = $('#Form_Area_' +Item_ID).get(0).scrollHeight;

※$('#Form_Area_' +Item_ID)').height();これでは高さの取得ができませんでした。

モーダルの高さで処理を変える

モーダルの高さを設定します

  var Modal_H = 303;

条件によってモーダルの高さを変更

 if(scrollHeight > Modal_H){
	console.log('303以上です');
	// cssを変更する処理
	$('.Menu_Select_Wrap').css('height','100vh');
    }else{
	console.log('303以下です');
	// cssを変更する処理
	$('.Menu_Select_Wrap').css('height','70vh');
    }

まとめ

height()で要素の高さを取得することができますが、どのBtn要素をクリックしても同じ高さでしか値が設定されていませんでした。
そのため今回は、data属性で特定の要素を設定しました。
data属性で設定することができれば、後はIDに紐づくデータを取得することができると思います。
拙い文章ですがご容赦くださいませ。