HTMLButtonElement : propriété command

Baseline 2025

Nouvellement disponible

Depuis December 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La propriété command de l'interface HTMLButtonElement permet d'obtenir et de définir l'action à effectuer sur un élément contrôlé par ce bouton. Pour que cela ait un effet, commandfor doit être défini.

Elle reflète l'attribut HTML command.

Dans cet article

Valeur

Une chaîne de caractères. Voir l'attribut command pour les valeurs valides.

Exemples

Exemple simple

html
<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
  Afficher la fenêtre contextuelle
</button>

<div popover id="mypopover">
  <button commandfor="mypopover" command="hide-popover">
    Masquer la fenêtre contextuelle
  </button>
</div>

js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

toggleBtn.command = "show-popover";

Utilisation de valeurs personnalisées pour les commandes

Dans cet exemple, trois boutons ont été créés en utilisant des valeurs personnalisées pour command. Chaque bouton cible la même image à l'aide de l'attribut commandfor.

html
<div class="controls">
  <button commandfor="the-image" command="--rotate-left">
    Tourner à gauche
  </button>
  <button commandfor="the-image" command="--reset">Réinitialiser</button>
  <button commandfor="the-image" command="--rotate-right">
    Tourner à droite
  </button>
</div>

<img
  id="the-image"
  src="/shared-assets/images/examples/dino.svg"
  alt="tête de dinosaure tournée de 0 degrés" />

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

Un écouteur d'événement est attaché à l'image en utilisant l'événement command. Lorsqu'un des boutons est cliqué, l'écouteur exécute du code en fonction de la valeur personnalisée de command assignée au bouton, fait pivoter l'image et met également à jour son texte alt pour indiquer le nouvel angle de l'image.

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 = `tête de dinosaure tournée de ${rotate} degrés`;
});

L'API Invoker Commands
La propriété HTMLButtonElement.commandForElement
L'interface CommandEvent
L'attribut command de <button>

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 1 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu