W3cubDocs

/Web APIs

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";

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

Specification
HTML> # dom-button-command>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`command`	135	135	preview	120	preview	135	No	89	No	No	135	No
`request-close`	139	139	preview	123	preview	139	No	91	No	No	139	No