HTMLButtonElement: command property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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";
Custom example, using events
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
<img id="the-image" src="photo.jpg" alt="[add appropriate alt text here]" />
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
if (event.command == "--rotate-left") {
event.target.style.rotate = "-90deg";
} else if (event.command == "--rotate-right") {
event.target.style.rotate = "90deg";
}
});
Specifications
No specification found
No specification data found for api.HTMLButtonElement.command
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
command |
Legend
Tip: you can click/tap on a cell for more information.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.