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

こんにちは、侍エンジニアブログ編集部です。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属性」についての詳しい説明は、以下のリンクを参照してみてください。

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

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

画像要素を取得した後、その要素の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ボタンです。

二つ目のボタンのonclick属性にはhide2関数が指定されています。

hide2関数は、getElementByIdメソッドを使用し画像要素を取得し、そしてstyle.visibilityプロパティにアクセスします。そして、文字列「hidden」を代入することで、画像を非表示にしているのです。

先ほども述べたように、displayを使用したボタンをクリックすると画像が消え、画像の下にあったボタンが上昇します。

しかし、visibilityを使用したボタンをクリックすると、画像があった部分は空白になるだけで、その空間は残ります。

ご覧いただけるように、ボタンは元の位置のままなのです。このように、用途別にプロパティの使い分けを行うこともできるのです。

まとめ

今回はstyle.displayプロパティについて解説しました。

簡単に要素の表示設定を指定することができるので、覚えておくと大変便利です。

皆さんもstyle.displayプロパティを始め、他の様々なプロパティなどの知識をどんどん深めて行ってくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次