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

HTMLのontoggleイベント属性とは？使い方と実装例をわかりやすく解説

ontoggleイベント属性とは

HTMLのontoggleイベント属性は、ユーザーが<details>要素を開いたり閉じたりしたタイミングで発生するイベントです。この属性を利用することで、開閉操作に合わせてJavaScriptを実行し、画面の表示やスタイルを動的に変化させることができます。

構文

基本的な記述方法は以下のとおりです。

<details ontoggle="script">コンテンツ</details>

それでは、実際にontoggleイベント属性を使った具体例を見ていきましょう。

実装例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
</style>
</head>
<body>
<h1>HTML ontoggle Event Attribute Demo</h1>
<details ontoggle="toggleFn()">
<summary>Hi! I'm summary element</summary>
<p>This is a paragraph with some dummy content.</p>
</details>
<script>
    function toggleFn() {
        document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
        document.body.style.color = "#fff";
    }
</script>
</body>
</html>

出力結果

HTMLのontoggleイベント属性とは？使い方と実装例をわかりやすく解説

このコードを実行すると、上図のようなページが表示されます。

次に、<details>要素（summary部分）をクリックして開いてみましょう。開閉操作をきっかけにontoggleイベントが発火し、背景色と文字色が切り替わります。

HTMLのontoggleイベント属性とは？使い方と実装例をわかりやすく解説

まとめ

ontoggleイベント属性を使えば、<details>要素の開閉状態の変化を簡単に検知できます。アコーディオンメニューの開閉に合わせたアニメーション表示など、インタラクティブなUIを実装したい場合にぜひ活用してみてください。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード