ウェブページの要素をJavaScriptで「表示or非表示」を切り替える方法。[display / visibility]

投稿日:2021-03-13



ナカジ(@cp_nakajun)です。

思うところがあって、というかやってみたいことがあって

ウェブページの要素を「表示or非表示」にする方法を調べました。

参照させて頂いたサイトはこちらになります。
JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)

先にお伝えしますと、本記事の技術的な内容は上記サイトと同様でしかないですが

「やってみたいこと」につなげたいこともあり僕なりにも残したいと思い本記事を書かせて頂くことにしました。

なのでほぼ忘備録です。

表示・非表示を切り替える2つの方法

まず、共通のHTML要素として以下のように準備します。

表示されるのは「文字」と「ボタン」です。

<div id="contents">表示させるコンテンツ領域</div>
<input type="button" value="ボタン" onclick="change()" />

ボタンを押すと「文字」が消えたり表示されたりするようにします。

実現する2つの方法としてJavaScriptの

  1. displayプロパティ
  2. visibilityプロパティ

を使います。


この2つの違いは非表示の時

  1. display:要素分の領域が無くなる
  2. visibility:要素分の領域が残る

という違いがあるので

残る要素の位置がズレても良いかどうかなどの点で使い分けが必要です。

続いて以下にそのサンプルを残します。
コードは先に紹介した参照サイトのコードですが、関数名やID名は自分が後でわかりやすいようにさせて頂きました。

displayプロパティでの使い方

  • 表示:block
  • 非表示:none

<script>
    //初期表示は非表示
    document.getElementById("contents").style.display ="block";

    function change(){
        const contents = document.getElementById("contents");
    
        if(contents.style.display=="block"){
            contents.style.display ="none"; // noneで非表示
        }else{
            contents.style.display ="block"; // blockで表示
        }
    }
</script>

visibilityプロパティでの使い方

  • 表示:visible
  • 非表示:hidden

<script>
    //初期表示は非表示
    document.getElementById("contents").style.visibility ="visible";

    function change(){
        const contents = document.getElementById("contents");
    
        if(contents.style.visibility=="visible"){
            contents.style.visibility ="hidden"; // hiddenで非表示
        }else{
            contents.style.visibility ="visible"; // visibleで表示
        }
    }
</script>

表示・非表示のトリガー

今回のサンプルでは

表示・非表示の切り替えは「ボタン」でしたが

ボタン以外にもJavaScriptに

<script>
    document.body.onclick = change;
</script>

とすると画面のどこをクリックしても切り替わるようになります。

関数「change」をトリガーすればいいということです。

学習にオススメ


・【NFTアート × Python】全くの初心者でもできるジェネラティブNFTの作成から出品まで icon

・【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】 icon

・改訂版プログラミングで科学を学ぼう! icon

・【JS】ガチで学びたい人のためのJavaScriptメカニズム icon





おすすめのクリエイティブ・コーディング関連カテゴリー


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します