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

ナカジ(@cp_nakajun)です。

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

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

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

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

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

なのでほぼ忘備録です。

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

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

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

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

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

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

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

を使います。

この２つの違いは非表示の時に

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」をトリガーすればいいということです。