みなさんこんにちは!
今回の記事は、

・displayプロパティとvisibilityプロパティの違いが分からない…
・jQueryを使ったやり方と混同してしまう…
というお悩みを解決する記事になっています。
・JavaScriptでdisplayプロパティを変更する方法
・displayプロパティとvisibilityプロパティの違い
・jQueryとの比較
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
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」プロパティについてご紹介します。
両者の特徴は以下の通りです。
display | visibility | |
---|---|---|
役割 | ・要素の表示/非表示を扱う | ・要素の視認性(見える/見えない)を扱う |
主な値 | ・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プロパティを使った場合は、見えなくなるだけで要素は実際には存在しているため、ボタンの位置もそのまま変化しません。
-272x300.jpg)
【番外編】jQueryでdisplayプロパティを操作する
さて、ここでは、jQueryでdisplayプロパティを操作する方法についてもご紹介しておきます。
jQueryでは、css()メソッドを使用することで、displayプロパティを操作できるようになっております。
基本的な使い方
$(セレクタ).css("プロパティ", "値")
また、以下の通り、要素の表示/非表示を扱うための専用のメソッドも用意されており、JavaScriptに比べてとても簡単に操作することが可能です。
メソッド名 | 役割 |
---|---|
show() | 要素を表示する |
hidden() | 要素を非表示にする |
toggle() | 要素の表示/非表示を交互に切り替える |
-272x300.jpg)
今回の記事は、 jQueryを使ってdisplayプロパティを変更したいjQueryを使って要素の表示/非表示を簡単に実装したい素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない という方に向[…]
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、JavaScriptでdisplayプロパティを変更する方法について解説してきましたがいかがでしたか?
ご紹介した通り、JavaScriptではstyleオブジェクトを使ってdisplayプロパティを操作することができます。
使い方自体はとても簡単なので、すぐに実践で使っていただけるかと思います。
また、jQueryを使った方法もご紹介していますので、こちらも併せて覚えておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んでいただきましてありがとうございました。