【JavaScript】displayプロパティで要素の表示/非表示を切り替える | コピペでOK

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptを使ってdisplayプロパティを変更したい!
・displayプロパティとvisibilityプロパティの違いが分からない…
・jQueryを使ったやり方と混同してしまう…

というお悩みを解決する記事になっています。


この記事の内容

・JavaScriptでdisplayプロパティを変更する方法
・displayプロパティとvisibilityプロパティの違い
・jQueryとの比較


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


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

JavaScriptでdisplayプロパティを変更するためには、styleオブジェクトを使用します。

styleオブジェクトとは、JavaScriptのオブジェクトの一つで、要素の幅や高さ、色や背景の指定など、要素のスタイルを変更する為に使われるものです。

styleオブジェクトのdisplayプロパティを使用する方法は以下の通りです。

JavaScriptオブジェクト.style.display = 値

styleオブジェクトは以下のようにCSSと同じ感覚で使用できるため、特に違和感なく操作できるかと思います。

displayプロパティの実装例【コピペでOK】

それでは早速、実際のコード例を見ながらその挙動を確認していきましょう。

以下では、ボタンをクリックすることで、displayプロパティを操作して要素の表示/非表示を切り替える処理を実装しています。

実装コード

<p id="test-text1">テストテキスト</p>

<button onClick="showText1()">テキストを表示</button>
<button onClick="hideText1()">テキストを非表示</button>

<script>
function showText1() {
  const text = document.getElementById("test-text1")

  text.style.display = "block"
}

function hideText1() {
  const text = document.getElementById("test-text1")

  text.style.display = "none"
}
</script>

動作確認用

テストテキスト

実際、上記のボタンをそれぞれ押していただくと、要素の表示/非表示が繰り返されるのがご確認いただけたかと思います。

displayプロパティとvisibilityプロパティの違い

続いては、displayプロパティと混同しがちな「visibilityプロパティについてご紹介します。

両者の特徴は以下の通りです。

displayvisibility
役割 ・要素の表示/非表示を扱う ・要素の視認性(見える/見えない)を扱う
主な値 ・block
・inline-block
・none
・visible
・hidden
・collapse

上記の通り、displayプロパティ要素の表示/表示を操作するためのものである一方で、visibilityプロパティ要素の視認性を操作するためのものです。

実際にその挙動を確認してみましょう。

実装コード

<p id="test-text2">テストテキスト</p>

<button onClick="showTextByDisplay()">displayプロパティでテキストを表示</button>
<button onClick="hideTextByDisplay()">displayプロパティでテキストを非表示</button>

<p id="test-text3">テストテキスト</p>

<button onClick="showTextByVisibility()">visibilityプロパティでテキストを表示</button>
<button onClick="hideTextByVisibility()">visibilityプロパティでテキストを非表示</button>

<script>
function showTextByDisplay() {
  const text = document.getElementById("test-text2")

  text.style.display = "block"
}

function hideTextByDisplay() {
  const text = document.getElementById("test-text2")

  text.style.display = "none"
}

function showTextByVisibility() {
  const text = document.getElementById("test-text3")

  text.style.visibility = "visible"
}

function hideTextByVisibility() {
  const text = document.getElementById("test-text3")

  text.style.visibility = "hidden"
}
</script>

動作確認用

テストテキスト

テストテキスト

上記の通り、displayプロパティを使って要素の表示/非表示を操作した場合には要素そのものが表示/非表示となるため、ボタン要素もその分上下しています。

一方、visibilityプロパティを使った場合は、見えなくなるだけで要素は実際には存在しているため、ボタンの位置もそのまま変化しません


傍楽たろう
少しややこしいですが、displayプロパティとvisibilityプロパティは似て非なるプロパティですので、使用する際にはその違いをしっかりと把握しておくようにしましょう。

【番外編】jQueryでdisplayプロパティを操作する

さて、ここでは、jQueryでdisplayプロパティを操作する方法についてもご紹介しておきます。

jQueryでは、css()メソッドを使用することで、displayプロパティを操作できるようになっております。

基本的な使い方

$(セレクタ).css("プロパティ", "値")

また、以下の通り、要素の表示/非表示を扱うための専用のメソッドも用意されており、JavaScriptに比べてとても簡単に操作することが可能です。

メソッド名役割
show()要素を表示する
hidden()要素を非表示にする
toggle()要素の表示/非表示を交互に切り替える

傍楽たろう
詳しくは以下の記事にて解説していますので、jQueryでのやり方も知りたい方はぜひこちらもご覧くださいね。

おすすめ記事

今回の記事は、 jQueryを使ってdisplayプロパティを変更したいjQueryを使って要素の表示/非表示を簡単に実装したい素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない という方に向[…]

サボテンとパソコン

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、JavaScriptでdisplayプロパティを変更する方法について解説してきましたがいかがでしたか?

ご紹介した通り、JavaScriptではstyleオブジェクトを使ってdisplayプロパティを操作することができます。

使い方自体はとても簡単なので、すぐに実践で使っていただけるかと思います。

また、jQueryを使った方法もご紹介していますので、こちらも併せて覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んでいただきましてありがとうございました。