Into the Program

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

Image

ファーストビューの要素の高さをブラウザの高さに合わせて表示する方法のご紹介です。

少し前にjQueryで似たような記事を書いていますが、現在jQueryを使わないネイティブなJavaScriptを勉強中でして、アウトプットも兼ねて記事にしています。

jQueryでの方法は下記のページでご紹介していますので、実装をお考えの方は参考にしていただければ幸いです。

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

本記事の内容

  • ブラウザの高さを取得して特定の要素に設定する
  • ロード、リサイズ時のイベントに対応する

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

ブラウザの高さを取得して要素の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';
});

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

JS②

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

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

window.addEventListener('load', myFunc);
window.addEventListener('resize', myFunc);

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 ryoy (@intotheprogram) on CodePen.

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

最後に

いかがでしたでしょうか。ファーストビューをブラウザの高さいっぱいに表示することでサイトのイメージを視覚的にユーザーに伝えることができるため、多くのサイトで利用されています。今後ウェブ制作をする中で、キービジュアルを目立たせるような案件がありましたら、ぜひ導入を検討してみてください。

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

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

SHARE