Document.mozSetImageElement()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

Document.mozSetImageElement() method changes the element being used as the CSS background for a background with a given background element ID.

句法

document.mozSetImageElement(imageElementId, imageElement);

参数

imageElementId is a string indicating the name of an element that has been specified as a background image using the -moz-element CSS function.
imageElement is the new element to use as the background corresponding to that image element string. Specify null to remove the background element.

范例

This example changes the background of a <div> block each time the block is clicked by the user.

View this example live .

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

The CSS defined by the <style> block above is used by our <div> to use an element with the id "canvasbg" as its background.

var c = 0x00;
function clicked() {
  var canvas = document.createElement("canvas");
  canvas.setAttribute("width", 100);
  canvas.setAttribute("height", 100);
  var 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);
}

The code here is called each time the user clicks the <div> element. It creates a new <canvas> with the width and height set to 100 pixels, then draws into it a 50 by 50 pixel square. Each time the function is called, the square is a different color (its red component is increased each time), so each time the user clicks the element, the background is filled with a brighter and brighter pattern of red tiles.

Once the canvas is drawn, document.mozSetImageElement() is called to set the background for any CSS using the ID "canvasbg" as its background element ID to be our new canvas.

规范

Not part of any specification.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`mozSetImageElement` 非标	Chrome No	Edge No	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No

图例

不支持
非标。预期跨浏览器支持较差。

另请参阅

-moz-element

元数据

最后修改： Mar 18, 2019

在此页

句法

参数

范例

规范

浏览器兼容性

图例

另请参阅

相关话题