HTMLButtonElement: command プロパティ

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

commandHTMLButtonElement インターフェイスのプロパティで、このボタンで制御される要素で実行されるアクションを取得し、設定します。これに効果を持たせるには、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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
command
Experimental

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.

関連情報