HTMLリファレンスマニュアル

HTMLタグ全般

HTML ontoggleイベント属性

オンラインサンプル

when the <details> element is opened or closed, JavaScript is executed:

サンプル

<!DOCTYPE　html>
<html>
<head>
<title>HTML　ontoggle　イベント属性の使用(基本チュートリアルウェブサイト　oldtoolbag.com)</title>/title>
<style>
div　{
　　background:　yellow;
　　border:　1px　solid　#cccccc;
　　padding:　10px;
}
</style>
</head>
<body>
<p>詳細を開く。/p>
<details　ontoggle="myFunction()">
<summary>著作権　1999-2019./summary>
<p>　-　著作権所有。/p>
<p>詳細な内容と段落はここに表示されます.../p>
</詳細
<p><strong>注意：</strong>/ontoggleイベント属性はChrome、Safariでサポートされています　6+、そして Opera　15+./p>
<script>
function myFunction() {
　　alert("ontoggle イベントがトリガーされました");
}
</script>
</body>
</html>

テストをしてみる ‹/›

定義と使用方法

ユーザーが <details> 要素を開いたり閉じたりしたときに、onggle 属性がトリガーされます。
<details> 要素は、ユーザーが必要に応じて表示または非表示できる詳細情報を指定します。

ブラウザの互換性

IEFirefoxOperaChromeSafari

HTML 4.01 HTML5 の違い

HTML5中、ontoggle 属性は新しいです。

文法

<element ontoggle="script">

属性値

値	説明
script	script が ontoggle で実行されます

技術的詳細

サポートされている HTML タグ:	<details>