HTMLButtonElement : propriété command

Baseline 2025

Newly available

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'interfaceHTMLButtonElement 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 HTMLcommand.

Valeur

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

Exemples

Exemple simple

html

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

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 desvaleurs personnalisées pourcommand.Chaque bouton cible la même image à l'aide de l'attributcommandfor.

html

<div>  <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   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énementcommand.Lorsqu'un des boutons est cliqué, l'écouteur exécute du code en fonction de la valeur personnalisée decommand assignée au bouton, fait pivoter l'image et met également à jour son textealt 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 = `tête de dinosaure tournée de ${rotate} degrés`;});