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.
* Some parts of this feature may have varying levels of support.
popoverTargetElement は HTMLButtonElement インターフェイスのプロパティで、制御ボタンで制御されるポップオーバー要素を取得および設定します。
これは JavaScript において HTML の popovertarget 属性に相当するものです。
値
DOM 内でのポップオーバー要素への参照です。
例
auto ポップオーバーによるポップオーバー操作の切り替え
この例では、ポップオーバー API の基本的な使い方を示しています。まず、 まず、ポップオーバーの表示と非表示に使用する HTML の JavaScriptのコードでは、最初に ポップオーバー API に対応している場合、コードでは メモ:
ポップオーバー要素は既定では非表示ですが、API に対応していない場合、要素は「通常通り」表示されます。 下記の例を試してみてください。
ボタンを操作してポップオーバーの表示と非表示を切り替えてください。
"auto" ポップオーバーは、ポップオーバーテキストの境界外を選択することでも閉じることができます。 の popoverTargetElement として設定します。
popover 属性は "manual" に設定されているため、ポップオーバーはボタンを使用して閉じられなければならず、ポップオーバー領域外を選択して「簡単な解除」はできません。
要素と、ポップオーバーとなる 要素に popovertargetaction 属性を設定したり、popover 属性を設定したりする必要はありません。
要素を取得します。
次に、ポップオーバーに対応しているかどうかを調べる関数を定義します。
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
// ポップオーバー API の対応を調べます。
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
popover 属性を "auto" に設定し、トグルボタンのポップオーバー対象とします。
次に、の popoverTargetAction を "toggle" に設定します。
ポップオーバー API に対応していない場合は、if (supportsPopover()) {
// 仕様書
Specification HTML
# dom-popovertargetelementブラウザーの互換性
関連情報