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

みなさんこんにちは!

今回の記事は、

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

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


この記事の内容

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


フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト



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を使った方法もご紹介していますので、こちらも併せて覚えておいてくださいね。

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

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