HTMLButtonElement: command プロパティ

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ja/web/api/invoker_commands_api/index.md)

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

仕様書

No specification found

No specification data found for api.HTMLButtonElement.command.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

BCD tables only load in the browser

関連情報