【JavaScript】「element.offsetHeight」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

ウェブ開発の中では、要素の高さを取得したい場面が多々あります。

この時に「element.offsetHeight」を使えば、簡単に要素の高さを取得できます。

この記事では「element.offsetHeight」の基本的な使い方やコード例を分かりやすく解説します！

また、下の動画でも「element.offsetHeight」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「element.offsetHeight」を使うと何ができるのか？

「element.offsetHeight」を使うとHTML要素の高さを取得することができます。

取得できる値は、pxで表したときの整数値です。例えば要素の高さが300pxなら「300」が取得できます。

また、「padding」や「border」も含めた高さになります。

例えば、CSSで下記のように要素を定義した場合

例えば、CSSで下記のように要素を定義した場合

.example {
  height: 200px;
  padding: 10px;
  border: 5px solid black;
}

この要素の「offsetHeight」は「200 + 10 + 10 (上下の padding) + 5 + 5 (上下の border) = 230px」となります。

「element.offsetHeight」は実際に見えてる高さが取得できる。

「element.offsetHeight」を使うと、実際に見えてる高さが取得できます。

そこが、「element.scrollHeight」との違いになります。

「element.offsetHeight」の使い方！

// HTML要素を取得
const element = document.querySelector('.example');

// offsetHeightを表示
console.log(`要素の高さは: ${element.offsetHeight}px です。`);

このコードは、「class=”example”」の要素の高さをコンソールに表示します。

具体的な使用例！アコーディオンメニューなどで使う

<div class="container">
    <dl>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
        <div class="box">
            <dt>項目</dt>
            <dd>内容です。内容です。内容です。内容です。内容です。内容です。内容です。</dd>
        </div>
    </dl>
</div>

let dts = document.querySelectorAll('dt');

dts.forEach( (dt) => {
    dt.addEventListener('click', () => {
       
        dt.parentElement.classList.toggle('show');

        const content = dt.nextElementSibling;
        const isOpen = content.offsetHeight > 0;
        if ( isOpen ) {
            content.style.height = '0px';
        } else {
            content.style.height = `${content.scrollHeight}px`;
        }
    });
} );

読みと専用

 content.style.height = `${content.scrollHeight}px`;

「element.offsetHeight」は読み取り専用なので、取得した値を使って、高さの指定をする際は、上記のように使います。

参考リンク！

仕様書。
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetheight

MDN。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。

「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。

こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「element.offsetHeight」は、要素の高さを知るための基本的なプロパティです。

正しく理解し、プロジェクトで最大限に活用しましょう！

この情報が役に立てば幸いです。試してみてください！

また、下の動画でも「element.offsetHeight」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまたっ！