“button”要素~“popovertargetaction”属性

“popovertargetaction”属性について

“popovertargetaction”属性は“button”要素をクリックしたときにポップオーバー要素の表示状態をどのように切り替えるかを指定します。表示状態を切り替えるポップオーバー要素は“popovertarget”属性によって指定されます。

値が“show”の場合は非表示状態のポップオーバーを表示状態に、“hide”の場合は表示状態のポップオーバー要素を非表示状態にします。

“popovertargetaction”属性を省略した場合や値が無効な場合は“toggle”として扱われます。

値が“toggle”の場合は非表示状態から表示状態の切り替えと、表示状態から非表示状態の切り替えを1個の“button”要素で行うことができます。

指定できる値

サンプルコード

<p>

<button popovertarget="pop" popovertargetaction="show">開く</button>
<button popovertarget="pop" popovertargetaction="hide">閉じる</button>

</p>

<div popover="manual" id="pop">

<p>東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？</p>

</div>

開く 閉じる

東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？

<p>

<button popovertarget="pop" popovertargetaction="toggle">開く/閉じる</button>

</p>

<div popover="manual" id="pop">

<p>東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？</p>

</div>

開く/閉じる

東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか？