We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Document.mozSetImageElement()

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

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.

Changes the element being used as the CSS background for a background with a given background element ID.

Syntax

document.mozSetImageElement(imageElementId, imageElement);

Parameters

  • 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.

Example

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.

Specifications

Not part of any specification.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No No No No ?

See also

ドキュメントのタグと貢献者

このページの貢献者: fscholz, teoli, MHasan, kscarfone, Sheppy
最終更新者: fscholz,