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
html
<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>
js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
toggleBtn.command = "show-popover";
Custom example, using events
html
<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]" />
js
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";
}
});