ホームページ > 記事 > ウェブフロントエンド > JavaScriptボタンの表示・非表示
JavaScriptボタンの表示・非表示
- PHPzオリジナル
- 2023-05-12 11:23:066151ブラウズ
インターネット技術の継続的な発展に伴い、JavaScript (以下、JS) は広く普及した技術になりました。 JS は、その強力な表現力、柔軟性、その他の特性により、もはや Web サイト開発の付属品ではなく、Web ページのインタラクションや動的な効果の中核となっています。この記事では、JSの基本操作であるボタンクリックで内容を表示・非表示にする方法を紹介します。
1. 基本構文
ボタンを表示および非表示にする方法を紹介する前に、JS の基本的な構文の知識を理解する必要があります。 Web ページの HTML ファイルでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを介して 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>上記のコードでは、制御が必要な3つの要素をid="wrapper"##の親要素にカプセル化しています。 ＃。クリック イベントがトリガーされると、
toggle() 関数は最初に親要素オブジェクト wrapper を取得し、次に wrapper.getElementsByClassName()## を通じてすべての # を取得します。 # メソッド。##class="content" 要素を取得し、配列 contents に保存します。次に、for を使用して配列内のすべての要素をループし、その display 属性の値が none であるかどうかを確認し、それを次のように設定します。 ブロック または なし。 3. 概要この記事では、ボタンをクリックして要素のコンテンツを表示/非表示にするという基本的な JS 操作を紹介します。 JS の構文の一部を紹介し、具体的な実装方法をデモンストレーションすることで、誰もがこのスキルをよりよく習得できると思います。 JS の記述には注意が必要で、特に DOM オブジェクトを参照する場合は、予期しないエラーを避けるためにオブジェクトがロードされていることを必ず確認してください。
以上がJavaScriptボタンの表示・非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。