HTMLInputElement: popoverTargetAction プロパティ
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
popoverTargetAction は HTMLButtonElement インターフェイスのプロパティで、<input> 要素の type="button" 型でで制御されるポップオーバー要素で実行されるアクション("hide"、"show"、"toggle" の何れか)を取得および設定します。
これは HTML の popovertargetaction 属性の値を反映します。
値
列挙値です。取りうる値は次の通りです。
"hide"-
このボタンは表示中のポップオーバーを非表示にします。すでに非表示のポップオーバーを非表示にしようとした場合は、何も行われません。
"show"-
このボタンは非表示のポップオーバーを表示します。すでに表示中のポップオーバーを表示させようとした場合は、何も行われません。
"toggle"-
このボタンはポップオーバーを表示と非表示の間でトグル切り替えします。ポップオーバーが非表示の場合は、表示されます。ポップオーバーが表示中の場合は、非表示になります。
popoverTargetActionが設定されていない場合、"toggle"がこの制御ボタンで行われる既定のアクションになります。
例
js
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
const popoverSupported = supportsPopover();
if (popoverSupported) {
popover.popover = "auto";
toggleBtn.popoverTargetElement = popover;
toggleBtn.popoverTargetAction = "toggle";
} else {
console.log("Popover API not supported.");
}
仕様書
| Specification |
|---|
| HTML Standard # dom-popovertargetaction |
ブラウザーの互換性
BCD tables only load in the browser