JavaScript は、Web ページに対話性とダイナミクスを追加するために使用できる、広く使用されているスクリプト言語です。多くの Web サイトでは、ユーザーのアクションに基づいて特定の要素やコンテンツを表示または非表示にする必要があるのが一般的です。 JavaScript は、この種のタスクに適したテクノロジです。
ここでは、JavaScript を使用して要素やコンテンツを表示または非表示にする方法と、その使用の長所と短所をいくつか紹介します。
以前のバージョンの JavaScript では、要素を表示および非表示にする従来の方法は、「style」属性を変更することでした。要素の「display」属性を変更することで、要素の可視性を変更できます。 「display」属性が「none」に設定されている場合、要素は非表示になり、「block」に設定されている場合、要素は表示されます。以下は例です。
<script> function showDiv() { document.getElementById("myDiv").style.display = "block"; } function hideDiv() { document.getElementById("myDiv").style.display = "none"; } </script> <div id="myDiv"> This is my hidden div. </div> <button onclick="showDiv()">Show the div</button> <button onclick="hideDiv()">Hide the div</button>
上記のコードでは、JavaScript の getElementById
関数を使用して myDiv
要素を取得し、次に showDiv
##display 属性は # 関数と
hideDiv 関数で変更され、要素を表示または非表示にする効果が得られます。
hide() 関数と
show() 関数を使用して要素を非表示にしたり表示したりできます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function showDiv() { $("#myDiv").show(); } function hideDiv() { $("#myDiv").hide(); } </script> <div id="myDiv"> This is my hidden div. </div> <button onclick="showDiv()">Show the div</button> <button onclick="hideDiv()">Hide the div</button>
show() 関数と
hide() 関数を使用して、
myDiv 要素を非表示にします。このメソッドは要素をスムーズに表示または非表示にするだけでなく、jQuery は生の JavaScript よりも理解されており読みやすいため、明示的なコードの可読性と保守性の点で他のメソッドよりも優れています。
classList 属性、
add() および
remove() メソッドを使用して要素のクラスを変更できます。この利点は、
style 属性を変更せずに要素の表示状態を制御できることです。
<script> function toggleDiv() { var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("hidden"); } </script> <style> .hidden { display: none; } </style> <div id="myDiv"> This is my div. </div> <button onclick="toggleDiv()">Toggle the div</button>
classList 属性と
toggle() メソッドは、クラスの追加または削除に使用されます。ボタンをクリックすると、
myDiv 要素の「hidden」クラスが追加または削除され、それによって要素の表示または非表示の状態が制御されます。
<style> #myDiv { opacity: 1; transition: opacity 0.5s ease-in-out; /* 设置 opacity 过渡时间为0.5秒,以及其中断点的加速度 */ visibility: visible; } #myDiv.hidden { opacity: 0; visibility: hidden; } </style> <script> function toggleDiv() { var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("hidden"); } </script> <div id="myDiv"> This is my div. </div> <button onclick="toggleDiv()">Toggle the div</button>
myDiv 要素が「visibility」属性を使用して非表示になっている場合でも、スペースを占有しないようにします。 JavaScript で
classList を使用して、「非表示」クラスの追加または削除の操作を制御します。
以上がJavaScriptで表示・非表示を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。