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 des HTMLButtonElement-Interfaces erhält und setzt das Popover-Element, welches über einen Button gesteuert werden soll.
Sie ist das JavaScript-Äquivalent des HTML-Attributs 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-detailsundaria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover an einer logischen Position in der Reihenfolge der Tastaturfokusnavigation, wenn es angezeigt wird. Dies macht das Popover für Benutzer von Tastaturen und unterstützenden Technologien (AT) zugänglicher (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 finden Sie unter Popover-Ankerpositionierung.
Wert
Eine Referenz auf ein Popover-Element im DOM.
Beispiele
Umschaltaktion des Popovers mit einem automatischen Popover
Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein Zuerst definieren wir ein HTML- Der JavaScript-Code erhält zunächst eine Referenz auf die Wenn die Popover-API unterstützt wird, setzt der Code das Hinweis:
Ein Popover-Element ist standardmäßig verborgen, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie üblich" angezeigt. Sie können das Beispiel unten ausprobieren.
Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten.
Das "auto" Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes geschlossen werden.popoverTargetElement eines festgesetzt wird.
Das popover-Attribut ist auf "manual" gesetzt, sodass das Popover mit einem Button geschlossen werden muss und nicht durch das Auswählen außerhalb des Popover-Bereichs "light dismissed" werden kann.
-Element, das wir verwenden werden, um das Popover anzuzeigen und zu verstecken, und ein popovertargetaction auf dem oder das popover-Attribut auf dem
-Elemente.
Dann definiert er eine Funktion, um die Unterstützung für 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");
}
popover-Attribut des "auto" und macht es zum Popover-Ziel des Umschalt-Buttons.
Wir setzen dann die popoverTargetAction des auf "toggle".
Falls die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des if (supportsPopover()) {
// Set the Spezifikationen
Specification HTML
# dom-popovertargetelementBrowser-Kompatibilität
Siehe auch