Document: mozSetImageElement() method
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The Document.mozSetImageElement()
method changes the
element being used as the CSS background for a background with a given background
element ID.
Syntax
mozSetImageElement(imageElementId, imageElement)
Parameters
imageElementId
-
A string indicating the name of an element that has been specified as a background image using the
-moz-element
CSS function. imageElement
-
The new element to use as the background corresponding to that image element string. Specify
null
to remove the background element.
Return value
None (undefined
).
Examples
This example changes the background of a <div>
block each time the
block is clicked by the user.
<style>
#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.
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);
}
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.
Specifications
Not part of any specification.
Browser compatibility
BCD tables only load in the browser