Document: mozSetImageElement() Methode

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die Document.mozSetImageElement() Methode ändert das Element, das als CSS-Hintergrund für einen Hintergrund mit einer bestimmten Hintergrundelement-ID verwendet wird.

Syntax

js
mozSetImageElement(imageElementId, imageElement)

Parameter

imageElementId

Ein String, der den Namen eines Elements angibt, das als Hintergrundbild mittels der -moz-element CSS-Funktion festgelegt wurde.

imageElement

Das neue Element, das als Hintergrund entsprechend diesem Bild-Element-String verwendet werden soll. Geben Sie null an, um das Hintergrundelement zu entfernen.

Rückgabewert

Keiner (undefined).

Beispiele

Dieses Beispiel ändert den Hintergrund eines <div>-Blocks jedes Mal, wenn der Block von der Nutzerin / dem Nutzer angeklickt wird.

Sehen Sie dieses Beispiel live.

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

Das im obigen <style>-Block definierte CSS wird von unserem <div> verwendet, um ein Element mit der ID "canvas-bg" als Hintergrund zu verwenden.

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);
}

Der Code hier wird jedes Mal aufgerufen, wenn die Nutzerin / der Nutzer das <div>-Element anklickt. Es wird ein neues <canvas> erstellt, dessen Breite und Höhe auf 100 Pixel gesetzt sind, und es wird ein Quadrat von 50 mal 50 Pixeln darin gezeichnet. Jedes Mal, wenn die Funktion aufgerufen wird, hat das Quadrat eine andere Farbe (seine rote Komponente wird jedes Mal erhöht), sodass bei jedem Klick der Nutzerin / des Nutzers auf das Element der Hintergrund mit einem immer leuchtenderen Muster aus roten Kacheln gefüllt ist.

Sobald das Canvas gezeichnet ist, wird document.mozSetImageElement() aufgerufen, um den Hintergrund für jedes CSS, das die ID "canvas-bg" als Hintergrundelement-ID verwendet, auf unser neues Canvas zu setzen.

Spezifikationen

Teil keiner Spezifikation.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch