HTMLButtonElement: command property - Web APIs | MDN
Skip to main content
Skip to search
Toggle sidebar
Web
Web APIs
HTMLButtonElement
command
Theme
OS default
Light
Dark
English (US)
Remember language
Learn more
de"<br>>Deutsch
en-US"<br>>English (US)
fr"<br>>Français
ja"<br>>日本語
HTMLButtonElement: command property
Baseline
2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Learn more
See full compatibility
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
html
Toggle popover
Hide popover
js<br>const popover = document.getElementById("mypopover");<br>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.<br>Each button targets the same image using the commandfor attribute.
html
Rotate Left<br>Reset<br>Rotate Right
.controls {<br>margin-block-end: 20px;
An event listener is attached to the image using the command event.<br>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.
js<br>const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {<br>let rotate = parseInt(event.target.style.rotate || "0", 10);<br>if (event.command === "--reset") {<br>rotate = 0;<br>event.target.style.rotate = `${rotate}deg`;<br>} else if (event.command === "--rotate-left") {<br>rotate = rotate === -270 ? 0 : rotate - 90;<br>event.target.style.rotate = `${rotate}deg`;<br>} else if (event.command === "--rotate-right") {<br>rotate = rotate === 270 ? 0 : rotate + 90;<br>event.target.style.rotate = `${rotate}deg`;<br>event.target.alt = `dinosaur head rotated ${rotate} degrees`;<br>});
Specifications
Specification
HTML<br># dom-button-command
Browser compatibility
Enable JavaScript to view this browser compatibility table.
See also
Invoker Commands API
HTMLButtonElement.commandForElement
CommandEvent
command attribute
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute<br>This page was last modified on Oct 17, 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content