HTMLButtonElement: command-Eigenschaft
Baseline 2025
Neu verfügbar
Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die command-Eigenschaft des HTMLButtonElement-Interfaces legt die Aktion fest, die auf einem von diesem Button gesteuerten Element ausgeführt werden soll, und ruft diese ab. Damit dies wirksam ist, muss commandfor gesetzt sein.
Sie spiegelt das command-HTML-Attribut wider.
Wert
Ein String. Siehe das command-Attribut für gültige Werte.
Beispiele
Einfaches Beispiel
<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
Toggle popover
</button>
<div popover id="mypopover">
<button commandfor="mypopover" command="hide-popover">Hide popover</button>
</div>
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
toggleBtn.command = "show-popover";
Verwendung benutzerdefinierter Werte für Befehle
In diesem Beispiel wurden drei Buttons mit benutzerdefinierten Werten für command erstellt. Jeder Button zielt mit dem commandfor-Attribut auf dasselbe Bild.
<div class="controls">
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
<button commandfor="the-image" command="--reset">Reset</button>
<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
</div>
<img
id="the-image"
src="/shared-assets/images/examples/dino.svg"
alt="dinosaur head rotated 0 degrees" />
Ein Ereignis-Listener wird an das Bild mit dem command-Ereignis angehängt. Wenn einer der Buttons geklickt wird, führt der Listener Code basierend auf dem benutzerdefinierten command-Wert aus, der dem Button zugewiesen wurde, dreht das Bild und aktualisiert auch dessen alt-Text, um den neuen Winkel des Bildes anzuzeigen.
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
let rotate = parseInt(event.target.style.rotate || "0", 10);
if (event.command === "--reset") {
rotate = 0;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-left") {
rotate = rotate === -270 ? 0 : rotate - 90;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-right") {
rotate = rotate === 270 ? 0 : rotate + 90;
event.target.style.rotate = `${rotate}deg`;
}
event.target.alt = `dinosaur head rotated ${rotate} degrees`;
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-button-command |