Document: mozSetImageElement() 方法

非标准： 此功能是非标准的，不在标准化路径上。不要在面向网络的生产环境网站中使用它：它不会对每个用户都有效。不同的实现之间也可能存在很大差异，并且行为在未来可能会改变。

Document.mozSetImageElement() 方法将用于 CSS 背景的元素更改为具有给定背景元素 ID 的背景。

语法

mozSetImageElement(imageElementId, imageElement)

参数

imageElementId 是一个字符串，指示使用 -moz-element CSS 函数指定为背景图像的元素的名称。
imageElement 是要作为对应于该图像元素字符串的背景使用的新的元素。指定 null 以移除背景元素。

返回值

无 (undefined).

示例

此示例在用户每次单击块时更改 <div> 块的背景。

查看此示例.

html

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

上面的 <style> 块定义的 CSS 用于我们的 <div>，使用 id 为“canvasbg”的元素作为其背景。

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> 元素时调用。它创建一个新的 <canvas>，其宽度和高度设置为 100 像素，然后在其上绘制一个 50x50 像素的正方形。每次调用该函数时，正方形的颜色都不同（每次都增加其红色分量），因此用户每次单击该元素时，背景都将填充更亮更亮的红色瓷砖图案。

绘制完画布后，调用 document.mozSetImageElement() 将使用 ID“canvasbg”作为其背景元素 ID 的任何 CSS 的背景设置为我们的新画布。

规范

不属于任何规范。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

-moz-element