【JavaScript】ブラウザの高さを取得して要素のheightに設定する

こんにちは、Ryohei（@ityryohei）です！

本記事では、ブラウザの高さを取得して要素のheightに設定する方法をご紹介しています。

JavaScriptでブラウザの高さを要素のhightに設定したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

本記事ではjQueryを使わない方法で実装しています。jQueryを使用した方法につきましては、下記の記事を参考にしていただければ幸いです。

では、解説していきます。

ブラウザの高さを取得して要素のheightに設定する

ブラウザの高さを取得して、取得した値を特定の要素のheightに設定する場合、処理の流れは下記のようになります。

ブラウザの高さを取得する
取得したブラウザの高さの値を設定する要素を取得する
取得した要素にブラウザの高さの値を設定する
上記の処理をロード、リサイズのイベント時に実行する

詳しく見ていきましょう。

HTML

本記事の解説では下記のHTMLを使用します。取得する要素はキービジュアルを想定しています。

<div id="keyvisual"></div>

ブラウザの高さを取得する

ブラウザ（ウィンドウ）の高さは下記の構文で取得することができます。

let wh = window.innerHeight;

innerHeightブラウザの内周（コンテンツが表示されている部分）の高さを取得する構文です。外周（ブラウザ自体のツールバーやメニュー等）を含めた高さを取得したい場合はouterHeightを使用します。本記事ではinnerHeightで進めていきます。

ブラウザの高さを設定する要素を取得する

今回はidがkeyvisualとなっている要素を取得します。

let elem = document.getElementById('keyvisual');

classやタグ等で取得されたい場合は、下記記事の冒頭で各要素の取得方法をご紹介していますので、ご参考にして頂ければと思います。

【JavaScript】要素にclassを追加・削除する【classList】

ここまででブラウザのコンテンツ部分の高さと、取得したブラウザの高さを設定する要素を取得することができました。続いてロード、リサイズ時に実行するためのスクリプトを記述していきます。

ロード、リサイズのイベントに登録する

スクリプトはエンジニアによって書き方は様々だと思いますが、参考までにいくつかサンプルをご紹介させていただきます。

JS①

ロード、リサイズのイベントにそれぞれ同様の処理内容を記述する方法です。行数は増えますが、JavaScriptがわからない方でもなんとなく処理内容が追えるような書き方だと思います。

window.addEventListener("load", () => {
    let elem = document.getElementById("keyvisual");
    let wh = window.innerHeight;
    elem.style.height = wh + "px";
}, false);

window.addEventListener("resize", () => {
    let elem = document.getElementById("keyvisual");
    let wh = window.innerHeight;
    elem.style.height = wh + "px";
}, false);

JS②

同じ処理内容を関数にまとめて、関数を指定してイベントに登録する方法です。JavaScriptのサンプルスクリプトを検索していると下記のような書き方が多く見受けられます。一般的に使用される方法かと思います。

const myFunc = () => {
    let elem = document.getElementById("keyvisual");
    let wh = window.innerHeight;
    elem.style.height = wh + "px";
};

window.addEventListener("load", myFunc, false);
window.addEventListener("resize", myFunc, false);

JS③

イベントタイプを配列にしてループする方法になります。イベントタイプが増えた際は配列に値を追加するだけで済むため、楽ですが、ループしているのでパフォーマンスは落ちるかと思います。

const types = ["load", "resize"];

types.forEach(function (type) {
    window.addEventListener(type, () => {
        let elem = document.getElementById("keyvisual");
        let wh = window.innerHeight;
        elem.style.height = wh + "px";
    });
});

本記事でご紹介したすべてのコードを記述すると下記のデモのような画面が完成します。

See the Pen Window Height | JavaScript by ryohei (@intotheprogram) on CodePen.

デモの右上に表示されている「EDIT ON CODEPEN」をクリックしていただくと、CodePenのサイトでデモの内容を全画面で確認することができます。実際にロードやリサイズ等を試していただければと思います。

最後に

今回はキービジュアルの要素をブラウザの高さいっぱいに表示することを想定して、記事にまとめてみました。キービジュアルはWEBサイトの印象そのもの。キービジュアルをいっぱいに表示することでメッセージを視覚的に伝えることができるため、最近では多くのサイトで採用されています。今後ウェブ制作をする中で、キービジュアルを目立たせたい場合に使用してみてはいかがでしょうか。

以上、JavaScriptでブラウザの高さを取得して要素のheightに設定する方法のご紹介でした！