JavaScript を使用して div を非表示および表示する方法

Web 開発では、ユーザーの対話エクスペリエンスを向上させるために、JavaScript を使用して要素を非表示にしたり表示したりする機能を実装する必要があることがよくあります。古典的なシナリオの 1 つは、ボタンをクリックして要素を非表示または表示することです。この機能をJavaScriptを使用して実装する方法を紹介します。

1. HTML 構造

まず、HTML で非表示または表示するボタンと div を作成する必要があります:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div"></div>

2. CSS スタイル

CSS スタイルをボタンと div に追加して、より美しく、操作しやすくすることができます:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

3. JavaScript コード

次に、JavaScript コードを使用して div を非表示にしたり表示したりする必要があります。関数。イベント リスナーを使用してボタン クリック イベントをリッスンし、CSS スタイルを使用して div の表示と非表示を制御できます。

まず、div の状態を表す変数を定義する必要があります。初期状態が表示され、true として定義されます。

let isShown = true;

次に、querySelector メソッドを使用して、ボタンと非表示または表示するボタン div の DOM 要素:

const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');

次に、クリック イベントをバインドする必要があります。つまり、ユーザーがボタンをクリックしたときに、次の操作を実行します。 ##

toggleBtn.addEventListener('click', function() {
  if(isShown) {
    toggleDiv.style.display = 'none';
    isShown = false;
  } else {
    toggleDiv.style.display = 'block';
    isShown = true;
  }
});

このコードでは、状態が表示状態であるかどうかを div で判断します。表示されている場合は、非表示状態に設定され、同時に状態変数が更新されます。逆の場合も同様です。

完全なコード:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    if(isShown) {
      toggleDiv.style.display = 'none';
      isShown = false;
    } else {
      toggleDiv.style.display = 'block';
      isShown = true;
    }
  });
</script>

4. 最適化

上記のコードは div 関数を非表示にしたり表示したりできますが、コードにはいくつかの冗長性があるため、最適化することができます。

まず、toggle メソッドを使用して、div の表示と非表示の状態を切り替えることができます。

toggleBtn.addEventListener('click', function() {
  toggleDiv.style.display = isShown ? 'none' : 'block';
  isShown = !isShown;
});

次に、スタイル定義を CSS に移動して、コードの保守性を向上させることができます。

#toggle-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  padding: 5px 10px;
}

#toggle-div {
  background-color: #f5f5f5;
  padding: 10px;
}

最終的に最適化された完全なコード:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div">这是要隐藏或显示的div</div>

<style>
  #toggle-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    padding: 5px 10px;
  }

  #toggle-div {
    background-color: #f5f5f5;
    padding: 10px;
  }
</style>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    toggleDiv.style.display = isShown ? 'none' : 'block';
    isShown = !isShown;
  });
</script>

5. 概要

JavaScript を使用して要素の表示と非表示を切り替えることは、Web 開発では非常に一般的なシナリオです。この機能は、イベント リスナー、CSS スタイルの操作、要素のステータスの制御を通じて適切に実装でき、ユーザー インタラクション エクスペリエンスを向上させることができます。コードを最適化すると、コードの可読性と保守性がさらに向上し、開発効率が向上します。

以上がJavaScript を使用して div を非表示および表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。