【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属性」についての詳しい説明は、以下のリンクを参照してみてください。

要素をクリックで処理開始! JavaScriptのonclickでイベントを指定
更新日 : 2019年12月30日

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

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

【JavaScript入門】getElementByIdを完全理解する3つのコツ!
更新日 : 2019年4月25日

画像要素を取得した後、その要素の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プロパティを始め、他の様々なプロパティなどの知識をどんどん深めて行ってくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。