HTMLButtonElement: popoverTargetElement-Eigenschaft
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.
Die popoverTargetElement-Eigenschaft der HTMLButtonElement-Schnittstelle erhält und setzt das über einen Button zu kontrollierende Popover-Element.
Es ist das JavaScript-Äquivalent zum HTML-Attribut popovertarget.
Die Herstellung einer Beziehung zwischen einem Popover und seinem auslösenden Button über die popoverTargetElement-Eigenschaft hat zwei zusätzliche nützliche Effekte:
- Der Browser erstellt eine implizite
aria-details- undaria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover, wenn es angezeigt wird, in einer logischen Position in der Tastaturnavigationsreihenfolge. Dies macht das Popover zugänglicher für Tastatur- und Assistenztechnologie (AT)-Nutzer (siehe auch Popover-Zugänglichkeitsfunktionen). - Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Weitere Details und Beispiele finden Sie unter Popover-Ankerpositionierung.
Wert
Ein Verweis auf ein Popover-Element im DOM.
Beispiele
Popover-Aktion umschalten mit einem automatischen Popover
Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein <div>-Element als Popover festgelegt wird, und anschließend als popoverTargetElement eines <button>-Elements gesetzt wird. Das popover-Attribut ist auf "manual" gesetzt, sodass das Popover mit einem Button geschlossen werden muss und nicht durch "leichtes Verwerfen", indem außerhalb des Popover-Bereichs ausgewählt wird.
Zuerst definieren wir ein HTML-<button>-Element, das wir verwenden werden, um das Popover anzuzeigen und zu verstecken, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir nicht das HTML-Attribut popovertargetaction auf das <button> oder das popover-Attribut auf das <div>, da wir dies programmatisch tun werden.
<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>
Der JavaScript-Code erhält zuerst eine Referenz zu den <div>- und <button>-Elementen. Danach definiert er eine Funktion, um die Unterstützung der Popover zu überprüfen.
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
// Check for popover API support.
function supportsPopover() {
return Object.hasOwn(HTMLElement.prototype, "popover");
}
Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Ziel-Popover des Umschalters. Danach setzen wir die popoverTargetAction des <button> auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies auszusagen, und verstecken den Umschalt-Button.
if (supportsPopover()) {
// Set the <div> element to be an auto popover
popover.popover = "auto";
// Set the button popover target to be the popover
toggleBtn.popoverTargetElement = popover;
// Set that the button toggles popover visibility
toggleBtn.popoverTargetAction = "toggle";
} else {
popover.textContent = "Popover API not supported.";
toggleBtn.hidden = true;
}
Hinweis: Ein Popover-Element ist standardmäßig ausgeblendet, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie gewohnt" angezeigt.
Sie können das Beispiel unten ausprobieren. Zeigen und verstecken Sie das Popover, indem Sie den Button umschalten. Das "auto" Popover kann auch durch Auswählen außerhalb der Grenzen des Popover-Textes geschlossen werden.
Spezifikationen
| Specification |
|---|
| HTML # dom-popovertargetelement |