JavaScriptで要素の高さ・幅を取得する方法を完全解説！offsetHeightなどDOM操作入門

1. JavaScriptのDOM操作とは？

1. JavaScriptのDOM操作とは？

JavaScriptのDOM操作とは、Webページの中にある文字や画像、ボタンなどを、プログラムから自由に扱う仕組みのことです。DOMとは「書類の設計図」のようなもので、HTMLで書かれたページを、JavaScriptが理解しやすい形にしたものです。

パソコンを触ったことがない人でも、ノートに書いた文章を後から消したり書き足したりするイメージをすると分かりやすいです。DOM操作は、画面に表示されている要素を、あとから調べたり動かしたりするために使います。

2. 要素の「高さ」と「幅」とは何か

2. 要素の「高さ」と「幅」とは何か

Webページの要素とは、四角い箱だと考えると理解しやすいです。この箱には、縦の長さである高さと、横の長さである幅があります。JavaScriptでは、この箱の大きさを数値で取得できます。

例えば、ボタンが思ったより小さいときや、画面いっぱいに画像を広げたいときに、高さや幅を知ることが役立ちます。数値は「ピクセル」という単位で取得されます。ピクセルとは、画面を作る小さな点のことです。

3. offsetHeightとoffsetWidthの基本

3. offsetHeightとoffsetWidthの基本

offsetHeightとoffsetWidthは、要素の高さと幅を簡単に取得できるプロパティです。プロパティとは、あらかじめ用意された情報箱のようなものです。

これらは、要素の中身だけでなく、枠線や余白も含めた実際の見た目の大きさを教えてくれます。そのため、初心者でも「画面で見た通りのサイズ」を扱いやすいのが特徴です。

const box = document.getElementById("box");

const height = box.offsetHeight;
const width = box.offsetWidth;

console.log(height);
console.log(width);

この例では、boxという名前の要素の高さと幅を取得しています。document.getElementByIdは、HTMLの中から指定した名前の要素を探す命令です。

4. 実行結果のイメージ

4. 実行結果のイメージ

上のコードを実行すると、コンソールと呼ばれる画面に数値が表示されます。これは、実際の要素の大きさを表しています。

200
300

この場合、高さが200ピクセル、幅が300ピクセルという意味になります。数字だけを見ると難しく感じますが、定規で箱を測っていると考えると分かりやすいです。

5. clientHeightとscrollHeightとの違い

5. clientHeightとscrollHeightとの違い

高さを取得する方法は、offsetHeightだけではありません。clientHeightは、枠線を除いた中身の高さを取得します。一方、scrollHeightは、スクロールで隠れている部分も含めた全体の高さを表します。

長い文章が入った箱を思い浮かべてください。見えている部分がclientHeight、実際に中に入っている全文の長さがscrollHeightです。用途によって使い分けることが大切です。

6. 幅を取得するときの考え方

6. 幅を取得するときの考え方

幅についても、高さと同じ考え方ができます。offsetWidthは見た目通りの横幅を取得し、clientWidthは枠線を除いた内側の幅を取得します。

画面サイズに合わせてレイアウトを調整したいとき、幅の取得はとても重要です。JavaScriptのDOM操作を使うことで、ページを開いた人の環境に合わせた表示が可能になります。

7. 初心者がつまずきやすいポイント

7. 初心者がつまずきやすいポイント

よくある間違いとして、HTMLが読み込まれる前に高さや幅を取得しようとしてしまうことがあります。その場合、正しい数値が取れません。

JavaScriptは、ページが表示されてから動かすことが基本です。要素が存在してからサイズを調べる、という順番を意識するだけで、エラーを減らすことができます。