JavaScriptボタンの表示・非表示-フロントエンドQ&A-php.cn

JavaScriptボタンの表示・非表示

PHPz

リリース： 2023-05-12 11:23:06

オリジナル

6086 人が閲覧しました

インターネット技術の継続的な発展に伴い、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>

ログイン後にコピー

上記のコードでは、制御が必要な3つの要素を

id="wrapper"##の親要素にカプセル化しています。＃。クリックイベントがトリガーされると、

toggle()

関数は最初に親要素オブジェクト wrapper を取得し、次に wrapper.getElementsByClassName()## を通じてすべての # を取得します。 # メソッド。##class="content" 要素を取得し、配列 contents に保存します。次に、for を使用して配列内のすべての要素をループし、その display 属性の値が none であるかどうかを確認し、それを次のように設定します。 ブロック または なし。 3. 概要この記事では、ボタンをクリックして要素のコンテンツを表示/非表示にするという基本的な JS 操作を紹介します。 JS の構文の一部を紹介し、具体的な実装方法をデモンストレーションすることで、誰もがこのスキルをよりよく習得できると思います。 JS の記述には注意が必要で、特に DOM オブジェクトを参照する場合は、予期しないエラーを避けるためにオブジェクトがロードされていることを必ず確認してください。

以上がJavaScriptボタンの表示・非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。