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'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.
Valeur
Une chaîne de caractères. Voir l'attribut command pour les valeurs valides.
Exemples
Exemple simple
<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>
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.
<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" />
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.
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`;
});
Spécifications
| Specification |
|---|
| HTML # dom-button-command |
Compatibilité des navigateurs
Voir aussi
- L'API Invoker Commands
- La propriété
HTMLButtonElement.commandForElement - L'interface
CommandEvent - L'attribut
commandde<button>