HTMLInputElement: popoverTargetElement プロパティ
popoverTargetElement
は HTMLInputElement
インターフェイスのプロパティで、<input>
要素の type="button"
型で制御されるポップオーバー要素を取得および設定します。
これは JavaScript において HTML の popovertarget
属性に相当するものです。
値
DOM 内でのポップオーバー要素への参照です。
例
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.");
}
自動ポップオーバーでのポップオーバーの切り替え動作
この例では、 popoverTargetAction
プロパティに "toggle" 値を設定したポップオーバー API の基本的な使用方法を示します。
popover
属性は "auto"
に設定されているので、ポップオーバーはポップオーバー領域の外側をクリックすることで閉じられた状態 ("light-dismissed") にすることができます。
まず、ポップオーバーの表示と非表示に使用する <input>
と、ポップオーバーとなる <div>
を定義します。
この場合、プログラムで行うのと同様に、ボタンには HTML の popovertargetaction
属性を設定しませんし、 popover
属性を <div>
に設定することもなく、
<input id="toggleBtn" type="button" value="ポップオーバーの表示切り替え" />
<div id="mypopover">これはポップオーバーのコンテンツです。</div>
JavaScript コードは最初に <div>
と <input>
要素のハンドルを取得します。
そして、ポップオーバーに対応しているかどうかを調べる関数を定義します。
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
// ポップオーバー API の対応状況を確認
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
ポップオーバー API に対応している場合、コードは <div>
要素の popover
属性を "auto"
に設定し、それをトグルボタンのポップオーバー対象とします。
そして、ボタンの popoverTargetAction
を "toggle"
に設定します。
ポップオーバー API に対応していない場合は、 <div>
要素のテキストコンテンツを変更してその状態にし、トグルボタンを非表示にします。
if (supportsPopover()) {
// <div> 要素を自動ポップオーバーに設定
popover.popover = "auto";
// ボタンをポップオーバーの対象に設定
toggleBtn.popoverTargetElement = popover;
// ボタンでポップオーバーの表示状態を切り替えるように設定
toggleBtn.popoverTargetAction = "toggle";
} else {
popover.textContent = "ポップオーバー API に対応していません。";
toggleBtn.hidden = true;
}
メモ: ポップオーバー要素は既定では非表示ですが、 API に対応していない場合は「通常通り」表示されます。
下記の例を試してみてください。 ボタンを切り替えることでポップオーバーを表示させたり、非表示にしたりできます。 「自動」ポップオーバーは、ポップオーバーテキストの枠外を選択することで解除することもできます。
仕様書
Specification |
---|
HTML Standard # dom-popovertargetelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
popover
グローバル属性- ポップオーバー API