HTMLButtonElement: popoverTargetElement プロパティ

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

popoverTargetElement は HTMLButtonElement インターフェイスのプロパティで、制御ボタンで制御されるポップオーバー要素を取得および設定します。

これは JavaScript において HTML の popovertarget 属性に相当するものです。

値

DOM 内でのポップオーバー要素への参照です。

例

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-popovertargetelement

ブラウザーの互換性

BCD tables only load in the browser

関連情報