文件:mozSetImageElement() 方法

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

Document.mozSetImageElement() 方法用於更改一個具有給定背景元素 ID 的背景所使用的元素。該方法會將指定元素設定為 CSS 背景。

語法

js
mozSetImageElement(imageElementId, imageElement)

引數

imageElementId

一個字串,指示一個已經透過 -moz-element CSS 函式指定為背景影像的元素的名稱。

imageElement

與該 imageElement 字串對應的,用作背景的新元素。指定 null 以移除背景元素。

返回值

無(undefined)。

示例

此示例將在使用者每次點選 <div> 塊時更改該塊的背景。

線上檢視此示例.

css
#my-box {
  background-image: -moz-element(#canvas-bg);
  text-align: center;
  width: 400px;
  height: 400px;
  cursor: pointer;
}

上面定義的 CSS 由我們的 <div> 使用,它將 ID 為 "canvas-bg" 的元素用作其背景。

js
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("canvas-bg", canvas);
}

這裡的程式碼在使用者每次點選 <div> 元素時被呼叫。它會建立一個新的 <canvas>,其寬度和高度均設定為 100 畫素,然後在其上繪製一個 50x50 畫素的正方形。每次呼叫該函式時,正方形的顏色都會不同(其紅色分量每次都會增加),因此每次使用者點選該元素時,背景都會填充越來越亮的紅色瓷磚圖案。

繪製完 canvas 後,會呼叫 document.mozSetImageElement() 方法,將任何使用 ID "canvas-bg" 作為其背景元素 ID 的 CSS 的背景設定為我們新建立的 canvas。

規範

不屬於任何規範。

瀏覽器相容性

另見