HTMLButtonElement : proprit command

Baseline 2025

Nouvellement disponible

Depuis dcembre 2025, cette fonctionnalit fonctionne sur les appareils et les versions de navigateur les plus rcents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

En savoir plus
Voir la compatibilit complte

La proprit command de l'interface HTMLButtonElement permet d'obtenir et de dfinir l'action effectuer sur un lment contrl par ce bouton. Pour que cela ait un effet, commandfor doit tre dfini.

Elle reflte l'attribut HTML command.

Valeur

Une chane de caractres. Voir l'attribut command pour les valeurs valides.

Exemples

Exemple simple

html

<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
  Afficher la fentre contextuelle
</button>

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

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

toggleBtn.command = "show-popover";

Utilisation de valeurs personnalises pour les commandes

Dans cet exemple, trois boutons ont t crs en utilisant des valeurs personnalises pour command. Chaque bouton cible la mme 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">Rinitialiser</button>
  <button commandfor="the-image" command="--rotate-right">
    Tourner  droite
  </button>
</div>

<img
  id="the-image"
  src="/shared-assets/images/examples/dino.svg"
  alt="tte de dinosaure tourne de 0 degrs" />

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

Un couteur d'vnement est attach l'image en utilisant l'vnement command. Lorsqu'un des boutons est cliqu, l'couteur excute du code en fonction de la valeur personnalise de command assigne au bouton, fait pivoter l'image et met galement jour son texte alt pour indiquer le nouvel angle de l'image.

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 = `tte de dinosaure tourne de ${rotate} degrs`;
});

Spcifications

Spcification
HTML # dom-button-command

Compatibilit des navigateurs

Voir aussi

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

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 8 juil. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu