2025/01/13 (更新日:2025/01/14)

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

Categories > JavaScriptの入門編

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

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

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

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

この記事の内容！

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

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

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

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

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

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

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

例えば、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

まとめ！

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

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

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