こんにちは、侍エンジニアブログ編集部です。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プロパティを始め、他の様々なプロパティなどの知識をどんどん深めて行ってくださいね！
