JavaScript の要素の非表示/表示

1. style.visibility プロパティを使用して HTML 要素を表示/非表示にする
2. style.display プロパティを使用して、HTML 要素を表示/非表示にする
3. jQuery の hide()/show() を使用して、HTML 要素を非表示/表示する
4. jQuery toggle() を使用して HTML 要素を表示/非表示にする
5. addClass()/removeClass() を使用して、HTML 要素を非表示/表示する

要素の表示と非表示を切り替えたい状況に遭遇することがよくあります。このチュートリアルでは、JavaScript で要素を表示/非表示にする方法を紹介します。

style.visibility プロパティを使用して HTML 要素を表示/非表示にする

style.visibility プロパティを hidden に設定すると、ターゲット要素が非表示になりますが、フローからは削除されません。したがって、ターゲット要素はレンダリングされますが、表示されません。レイアウトには影響せず、他の要素が自然な空間を占めることができます。プロパティを visible に戻すことで、ターゲット要素を再び表示できます。

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

style.display プロパティを使用して、HTML 要素を表示/非表示にする

style.display プロパティを none に設定すると、ページの通常のフローからターゲット要素が削除され、残りの要素がそのスペースを占有できるようになります。ターゲット要素はページに表示されませんが、DOM を介して操作できます。すべての子孫が影響を受け、親要素のように表示されません。プロパティを block に設定することで、ターゲット要素を再び表示できます。block は要素にマージンを追加するため、display を''として設定することをお勧めします。

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

jQuery の hide()/show() を使用して、HTML 要素を非表示/表示する

show() メソッドは、display:none または jQuery hide() メソッドで非表示になっている要素を表示するのに役立ちます。可視性が非表示になっている要素を表示することはできません。次の 3つのパラメーターを受け入れます。

1. Speed：フェード効果の遅延速度を指定します。
2. Easing：表示/非表示状態への移行に使用されるイージング機能を指定します。swing と linear の 2つの異なる値を取ります。
3. Callback：show() メソッドの実行が完了した後に実行される関数です。

同様に、jQuery の hide() メソッドは、選択した要素を非表示にするのに役立ちます。show() と同じ 3 パラメータを取ります。

$('#element').hide();  // hide
$('#element').show();  // show

jQuery toggle() を使用して HTML 要素を表示/非表示にする

jQuery の toggle() は、hide() メソッドと show() メソッドを切り替えることができる特別なメソッドです。非表示の要素を表示したり、表示された要素を非表示にしたりするのに役立ちます。また、jQuery の hide() および show() メソッドと同じ 3つのパラメーターを取ります。また、非表示/表示効果を切り替えるのに役立つ 4 番目のパラメーター表示も必要です。これはブールパラメータであり、false に設定すると、要素を非表示にします。

$('div.d1').toggle(500, swing);  // toggle hide and show

addClass()/removeClass() を使用して、HTML 要素を非表示/表示する

addClass() 関数は、要素の既存のクラスリストにクラスを追加するのに役立ち、removeClass() はそれを削除するのに役立ちます。これらの関数を使用して、要素を非表示にするカスタムクラスを作成し、それをクラスリストに追加したり、クラスリストから削除したりすることで、非表示と表示を切り替えることができます。

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show