HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

ユーザーがHTMLのdetails要素を開閉したときにスクリプトを実行する方法

ユーザーが<details>要素を開いたり閉じたりすると、ontoggleイベントが発生します。このイベント属性を活用すれば、開閉操作のタイミングに合わせて任意のJavaScriptを実行できます。

以下に、ontoggleイベント属性を使った基本的な実装例を示します。

実装例

<!DOCTYPE html>
<html>
   <body>
      <h2>詳細情報</h2>
      <p>2月23日から出社が必要です</p>
      <details ontoggle="showInfo()">
         <summary>さらに詳しく</summary>
         <p>勤務時間：9:00～17:30</p>
         <p>オフィス所在地：ハイデラバード</p>
      </details>

      <script>
         function showInfo() {
            alert("勤務時間・オフィス所在地などの詳細情報");
         }
      </script>
   </body>
</html>

コードのポイント

  • <details>要素にontoggle属性を指定し、イベント発生時に呼び出す関数名を記述します。
  • <summary>部分をクリックして開閉するたびにontoggleイベントが発火し、指定した関数が実行されます。
  • この例では、開閉のタイミングでアラートによって詳細情報を表示しています。

開いたときだけ処理を実行するには

ontoggleイベントは「開くとき」と「閉じるとき」の両方で発生します。開いている状態かどうかを判定したい場合は、openプロパティを確認しましょう。

<script>
   const details = document.querySelector("details");
   details.addEventListener("toggle", () => {
      if (details.open) {
         console.log("詳細が開かれました");
      } else {
         console.log("詳細が閉じられました");
      }
   });
</script>

このように、<details>要素とontoggleイベントを組み合わせることで、アコーディオンUIの開閉に連動した動的な処理を簡単に実装できます。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実