javascriptで高さを取得したいが、"undefined"と結果が出てしまう

Question

実現したいこと

wordpressの一般投稿記事内の画面下に固定したアコーディオンボタンを出し入れするのに、アコーディオンボタンの中のコンテンツの高さを取得して、bottomの値に入れたいです。
javascriptは編集画面のhtmlコードの下に入れています。

発生している問題・分からないこと

アコーディオンボタンの中のコンテンツの高さを取得する時に、コンソールで値を確認したところ、「undefined」と結果が出ます。

エラーメッセージ

※↓コンソールに出ている結果です。
undefined
undefined
<div class="sp-color-list-body">
        <div class="overflow">
            <div class="color-list">
                ...
            </div>
        </div>
    </div>

該当のソースコード

<section id="sp-color-list">
    <div class="accordion-btn title">
        <p>カラー一覧を見る</p>
        <span>※ぜひこちらのカラーと見比べながら読まれてください。</span>
    </div>
    <div class="sp-color-list-body">
        <div class="overflow">
            <div class="color-list">
                ...
            </div>
        </div>
    </div>
</section>
 <script>
jQuery('#sp-color-list .accordion-btn').on('click', function() {
    var Height_ColorListBody = document.querySelector('#sp-color-list').innerHeight;
    console.log(Height_ColorListBody);
    console.log( document.querySelector('.sp-color-list-body').Height);
    console.log( document.querySelector('.sp-color-list-body'));
    if(jQuery('#sp-color-list').hasClass('active')){
        jQuery('#sp-color-list').removeClass('active');
        jQuery('#sp-color-list').css( { 'bottom' : -( Height_ColorListBody + 2 )+ 'px'});
    }else{
        jQuery('#sp-color-list').addClass('active');
        jQuery('#sp-color-list').css( { 'bottom' : -2 + 'px'});
    }
  });
 </script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

上記のコードの「console.log( document.querySelector('.sp-color-list-body'));」の所はHTMLが取得できていますが、.Height、.innerHeightが取得できていない状態です。

どなたかご教示いただきたいです。

補足

特になし

Answer 1

リファレンスを読んだり console.dir(document.querySelector('#sp-color-list')) の結果を眺めるとわかりますが、HTML要素に Height や innerHeight というプロパティは存在しないかと思います。どちらも offsetHeight ではないでしょうか。

Comments

[risa__]

int32_tさんのおっしゃる通りで、offsetHeightで試してみると、数値の結果が出ました！

認識がごちゃごちゃになっていたようです。
そもそも、 .heightは画面の高さ、innerHeightはブラウザのサイズ、今回教えていただいた.offsetHeightは要素の高さを取得できるのですね。↓
https://qiita.com/ringtail003/items/00d40b4b586d33b0737a

ありがとうございました！！

Answer 2

jQueryを利用するならその流れで参照してください

jQuery('#sp-color-list .accordion-btn').on('click', function() {
  var h1 = $('#sp-color-list').height();
  console.log(h1);
  var h2 = getComputedStyle(document.querySelector('#sp-color-list')).getPropertyValue('height');
  console.log(h2);
});

Comments

[risa__]

このやり方でもできるのですね、試してみます！