【JavaScript入門】すぐわかる！ style.displayプロパティを使ってみよう

2024年3月1日

Kotono

こんにちは、侍エンジニアブログ編集部です。JavaScriptの学習ははかどってますか？

さっそくですが、今回はstyle.displayプロパティをご紹介します。

この記事ではstyle.displayプロパティの基本から「displayやvisibilityとの違いとは？」などといった、より発展的な内容に関しても分かりやすく解説していきます。

style.displayプロパティとは

みなさんはstyle.displayプロパティを使用したことはありますか？　style.displayプロパティとは正確にはStyleオブジェクトのdisplayプロパティです。

Styleオブジェクトとは、要素のスタイルを自由自在に変更する為に使われるものです。例えば、要素の高さや幅、色や背景の指定など、様々な工夫を加えることが出来ます。

displayプロパティについて

要素のスタイルを変更出来るStyleオブジェクト。その中でも、displayプロパティは要素の表示形式を指定する役割があります。要素を非表示にしたり、ブロック要素として表示したり、様々な表示方法を指定することができます。

style.displayプロパティの基本的な使い方

それでは、さっそくstyle.displayプロパティを使用してみましょう！

下記のコードをご覧ください。

<html>
<body>
    <img id="style1" src="img_logo.jpg" width="150" height="150">
    <br>
    <input type="button" value="Hide" onclick="hide();"/>
    <br>
    <input type="button" value="Show" onclick="show();"/>
</body>
<script>
    function hide() {
        var e = document.getElementById("style1");
        e.style.display = "none";
    }


    function show(){
        var e = document.getElementById("style1");
        e.style.display = "block";
    }
</script>
</html>

上のコードでは、style.displayプロパティを使用して画像を表示したり非表示にしたりしてみました。

まずは、imgタグを使用し画像を表示させています。そして画像の下に二つのボタンを作成しました。

一つ目のボタンは画像を非表示にするための、Hideボタンです。二つ目のボタンは画像を再び表示させるための、Showボタンです。

Hideボタンのonclick属性にはhide関数が指定されています。

「onclick属性」についての詳しい説明は、以下のリンクを参照してみてください。

要素をクリックで処理開始! JavaScriptのonclickでイベントを指定

更新日：2024年3月29日

hide関数はまず、getElementByIdメソッドを使用して画像要素を取得します。

「getElementByIdメソッド」についてもっと詳しく知りたい方は、以下のリンクを見てみてください。

【JavaScript入門】getElementByIdを完全理解する3つのコツ！

更新日：2024年3月29日

画像要素を取得した後、その要素のstyle.displayプロパティにアクセスし、文字列「none」を代入しています。noneという値を代入することで、要素を非表示にすることが出来るのです。

実際、Hideボタンをクリックすると、画像が無くなり、ボタンの位置が上がっているのが分かります。反対に、Showボタンをクリックすると、画像が再び表示されます。

Showボタンのonclick属性にはshow関数が指定されています。show関数は、hide関数と同じくgetElementByIdメソッドで画像要素を取得した後、style.displayプロパティにアクセスします。

そして、文字列「block」を代入します。こうすることで、画像のブロック表示が可能になり、再び画像が表示されるのです。

displayとvisibilityの違いとは

先ほどのサンプルコードでは、styleオブジェクトのdisplayプロパティを使用して画像の表示設定を変更しています。しかし、displayプロパティの他にも、visibilityプロパティを使用し、画像を表示したり非表示にしたりできるのです。

以下のコードをご覧ください。

<html>
<body>
    <img id="drag1" src="img_logo.jpg" width="150" height="150">
    <br>
    <input type="button" value="Hide with DISPLAY" onclick="hide1();"/>
    <br>
    <input type="button" value="Hide with VISIBILITY" onclick="hide2();"/>

</body>

<script>
    function hide1() {
        var e = document.getElementById("drag1");
        e.style.display = "none";
    }

    function hide2() {
        var e = document.getElementById("drag1");
        e.style.visibility = "hidden";
    }
</script>

</html>

上のコードでは、先ほどの画像を非表示にするために、二つのボタンを作成しました。

一つ目は、先ほどと同じdisplayプロパティを使用したHide with DISPLAYボタンです。二つ目は、visibilityプロパティを使用したHide with VISIBILITYボタンです。