HTMLButtonElement: popoverTargetAction プロパティ

Baseline 2024

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

popoverTargetAction は HTMLButtonElement インターフェイスのプロパティで、この制御ボタンで制御されるポップオーバー要素で実行されるアクション（"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

関連情報