CARVIEW |
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="/shared-assets/images/examples/dino.svg"
alt="dinosaur head rotated 0 degrees" />
.controls {
margin-block-end: 20px;
}
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…