DOM

：

：

Document.mozSetImageElement() メソッド

　編集：2022.10.11 by T.A.

[Edge]⛌。非標準。→、

非標準： この機能は非標準であり、標準トラックにはありません。Web に面している実稼働サイトでは使用しないでください。すべてのユーザーに対して機能するとは限りません。また、実装間に大きな非互換性がある可能性があり、将来的に動作が変更される可能性があります。

このメソッドは、指定された背景要素 ID を持つ背景の CSS 背景として使用されている要素を変更します。

構文
Document.mozSetImageElement(imageElementId, imageElement)
Document Document。
imageElementId CSS 関数 -moz-element() を使用して背景画像として指定された要素の名前を示す文字列です。
imageElement そのイメージ要素文字列に対応する背景として使用する新しい要素です。背景要素を削除するには、null を指定します。
戻り値

なし（undefined）。

例
mdnより

この例では、ユーザーがブロックをクリックするたびに <div> ブロックの背景を変更します。

→ 

<style>
  #mybox {
    background-image: -moz-element(#canvasbg);
    text-align: center;
    width: 400px;
    height: 400px;
    cursor: pointer;
  }
</style>

上記の <style> ブロックで定義された CSS は、ID「canvasbg」を持つ要素を背景として使用するために <div> で使用されます。 

let c = 0x00;
function clicked() {
  const canvas = document.createElement("canvas");
  canvas.setAttribute("width", 100);
  canvas.setAttribute("height", 100);

  const ctx = canvas.getContext('2d');
  ctx.fillStyle = `#${c.toString(16)}0000`;
  ctx.fillRect(25, 25, 75, 75);

  c += 0x11;
  if (c > 0xff) {
    c = 0x00;
  }

  document.mozSetImageElement("canvasbg", canvas);
}

このコードは、ユーザーが <div> 要素をクリックするたびに呼び出されます。幅と高さが 100 ピクセルに設定された新しい <canvas> を作成します。次に、50 x 50 ピクセルの正方形を描画します。関数が呼び出されるたびに、正方形は異なる色です（その赤の成分は毎回増加します）。ユーザーが要素をクリックするたびに、背景は、ますます明るくなる赤いタイルのパターンで埋め尽くされます。

キャンバスが描画されたら、document.mozSetImageElement() が呼び出され、ID「canvasbg」を背景要素 ID として使用して CSS の背景を新しいキャンバスに設定します。

テスト