インターネット技術の継続的な発展に伴い、JavaScript (以下、JS) は広く普及した技術になりました。 JS は、その強力な表現力、柔軟性、その他の特性により、もはや Web サイト開発の付属品ではなく、Web ページのインタラクションや動的な効果の中核となっています。この記事では、JSの基本操作であるボタンクリックで内容を表示・非表示にする方法を紹介します。
1. 基本構文
ボタンを表示および非表示にする方法を紹介する前に、JS の基本的な構文の知識を理解する必要があります。 Web ページの HTML ファイルでは、<script>
タグを介して Web ページに JS コードを埋め込み、Web ページ要素を制御できます。以下は、HTML ドキュメントに JS を埋め込むための一般的な形式です。
<html> <head> <script> JS代码内容 </script> </head> <body> HTML文档正文 </body> </html>
JS では、通常、document.getElementById()
関数を使用して Web ページ要素を取得します。この関数は、id 属性の値に基づいて対応する HTML 要素を取得し、その要素のオブジェクトを返します。例:
<button id="btn">点击我</button> <script> var btn = document.getElementById("btn"); </script>
上記のコードは、ID「btn」のボタン要素を取得し、それを変数 btn
に割り当てます。次にJSを使ってボタンの表示・非表示を制御してみます。
2. ボタンをクリックして表示/非表示を切り替えます
1. ボタンの表示/非表示を制御します
JS では、CSS スタイル display# を使用できます## 要素の表示または非表示を制御するプロパティ。
display 属性の値が
none の場合、要素は非表示になります。
display 属性の値が
block の場合、要素は非表示になります。要素は非表示になり、表示されます。
display 属性を
none または # に設定します。 # #block
は要素の表示/非表示を切り替えることができます。 以下は簡単な実装方法です:
<button onclick="toggle()">点击我</button> <div id="content" style="display:none;">需要显示/隐藏的内容</div> <script> function toggle() { var content = document.getElementById("content"); if (content.style.display === "none") { content.style.display = "block"; } else { content.style.display = "none"; } } </script>
上記のコードでは、ボタンを作成し、その
onclick イベント toggle() で関数 をバインドしました。
、この関数は、表示/非表示にする必要がある要素を制御するために使用されます。この関数では、document.getElementById()
関数を通じて要素 id="content"
を取得し、それを変数 content
に割り当てます。次に、要素の display
属性値が none
であるかどうかを判断し、そうである場合は block
に設定し、そうでない場合は に設定します。なし###。
2. 複数の要素の表示/非表示を制御する
onclick
イベントをトラバースして、要素のstyle.display 属性を介して制御できます。 /その子要素を隠します。
実装方法は以下の通りです。
<button onclick="toggle()">点击我</button> <div id="wrapper"> <div class="content" style="display:none;">需要显示/隐藏的内容 1</div> <div class="content" style="display:none;">需要显示/隐藏的内容 2</div> <div class="content" style="display:none;">需要显示/隐藏的内容 3</div> </div> <script> function toggle() { var wrapper = document.getElementById("wrapper"); var contents = wrapper.getElementsByClassName("content"); for (var i = 0; i < contents.length; i++) { var content = contents[i]; if (content.style.display === "none") { content.style.display = "block"; } else { content.style.display = "none"; } } } </script>
id="wrapper"##の親要素にカプセル化しています。 #。クリック イベントがトリガーされると、
toggle() 関数は最初に親要素オブジェクト wrapper
を取得し、次に wrapper.getElementsByClassName()## を通じてすべての # を取得します。 # メソッド。##class="content"
要素を取得し、配列 contents
に保存します。次に、for
を使用して配列内のすべての要素をループし、その display
属性の値が none
であるかどうかを確認し、それを次のように設定します。 ブロック
または なし
。 3. 概要
この記事では、ボタンをクリックして要素のコンテンツを表示/非表示にするという基本的な JS 操作を紹介します。 JS の構文の一部を紹介し、具体的な実装方法をデモンストレーションすることで、誰もがこのスキルをよりよく習得できると思います。 JS の記述には注意が必要で、特に DOM オブジェクトを参照する場合は、予期しないエラーを避けるためにオブジェクトがロードされていることを必ず確認してください。
以上がJavaScriptボタンの表示・非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。