HTMLButtonElement: command-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die command-Eigenschaft der HTMLButtonElement-Schnittstelle ruft die Aktion ab und legt sie fest, die bei einem durch diese Schaltfläche gesteuerten Element ausgeführt werden soll. Damit dies Wirkung zeigt, 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 Schaltflächen mit benutzerdefinierten Werten für command erstellt.
Jede Schaltfläche zielt auf dasselbe Bild unter Verwendung des commandfor-Attributs ab.
<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="http://developer.mozilla.org/shared-assets/images/examples/dino.svg"
alt="dinosaur head rotated 0 degrees" />
Ein Event-Listener wird dem Bild mit dem command event zugeordnet.
Wenn eine der Schaltflächen angeklickt wird, führt der Listener Code basierend auf dem benutzerdefinierten command-Wert aus, der der Schaltfläche zugewiesen ist, dreht das Bild und aktualisiert auch den 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
| Specification |
|---|
| HTML # dom-button-command |
Browser-Kompatibilität
Loading…