HTMLButtonElement: command プロパティ
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
command
は HTMLButtonElement
インターフェイスのプロパティで、このボタンで制御される要素で実行されるアクションを取得し、設定します。これに効果を持たせるには、commandfor
を設定する必要があります。
これは HTML の command
属性を反映します。
値
文字列です。有効な値については command
属性の記事を参照してください。
例
基本的な例
html
<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
ポップオーバーをトグル切り替え
</button>
<div popover id="mypopover">
<button commandfor="mypopover" command="hide-popover">
ポップオーバーを非表示
</button>
</div>
js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
toggleBtn.command = "show-popover";
イベントを使用した独自の例
html
<button commandfor="the-image" command="--rotate-left">左回転</button>
<button commandfor="the-image" command="--rotate-right">右回転</button>
<img id="the-image" src="photo.jpg" alt="[ここに適切な代替テキストを追加]" />
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";
}
});
仕様書
Specification |
---|
HTML # dom-button-command |
ブラウザーの互換性
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.