HTMLButtonElement: command property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set.
It reflects the command HTML attribute.
Value
A string. See the command attribute for valid values.
Examples
Basic example
<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>
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
toggleBtn.command = "show-popover";
Using custom values for commands
In this example, three buttons have been created using custom values for command.
Each button targets the same image using the commandfor attribute.
<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="https://developer.mozilla.org/shared-assets/images/examples/dino.svg"
alt="dinosaur head rotated 0 degrees" />
An event listener is attached to the image using the command event.
When one of the buttons is clicked, the listener runs code based on the custom command value assigned to the button, rotating the image and also updating it's alt text to indicate the new angle of the image.
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
let rotate = parseInt(event.target.style.rotate || "0");
if (event.command == "--reset") {
rotate = 0;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-left") {
rotate === -270 ? (rotate = 0) : (rotate = rotate - 90);
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-right") {
rotate === 270 ? (rotate = 0) : (rotate = rotate + 90);
event.target.style.rotate = `${rotate}deg`;
}
event.target.alt = `dinosaur head rotated ${rotate} degrees`;
});
Specifications
| Specification |
|---|
| HTML # dom-button-command |
Browser compatibility
Loading…