HTMLButtonElement: command-Eigenschaft

Baseline 2025

Neu verfügbar

Seit December 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 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.

In diesem Artikel

Wert

Ein String. Siehe das command Attribut für gültige Werte.

Beispiele

Einfaches Beispiel

html
<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>

js
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.

html
<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" />

.controls {
  margin-block-end: 20px;
}

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.

js
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`;
});

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Invoker Commands API
HTMLButtonElement
Instanzeigenschaften
Instanzmethoden
Vererbung
Verwandte Seiten für Invoker Commands API