Document.mozSetImageElement() — Methode · JavaScript-Referenz

Signatur

Document.prototype.mozSetImageElement(imageElementId, imageElement)

Beschreibung

document.mozSetImageElement() ist eine Firefox-spezifische Erweiterung. Sie arbeitet mit der CSS-Funktion -moz-element(#id) zusammen. Mit dieser Funktion lässt sich der gerenderte Inhalt eines beliebigen Elements, etwa eines <canvas>, <video> oder <img>, als Hintergrundbild eines anderen Elements verwenden.

Normalerweise sucht -moz-element(#foo) das Element mit dem Attribut id="foo" im Dokument. Mit mozSetImageElement("foo", element) ordnen Sie der ID foo stattdessen ein beliebiges Element zu. Das Element braucht dafür keine passende id und muss auch nicht im DOM hängen. Deshalb eignet sich die Methode gut für Canvas-Elemente, die nur im Speicher existieren und dynamisch gezeichnete Hintergründe liefern, zum Beispiel Verläufe, Muster oder Animationen.

Übergeben Sie null als zweites Argument, wird die Zuordnung wieder aufgehoben. -moz-element() greift dann wieder auf das Element im Dokument zurück, das die ID tatsächlich trägt (falls vorhanden).

Parameter

Name	Typ	Default	Beschreibung
$imageElementId Pflicht	string		Die ID (ohne `#`), auf die sich `-moz-element(#id)` im CSS bezieht.
$imageElement Pflicht	Element \| null		Das Element, dessen Darstellung als Hintergrund dienen soll. Mit `null` wird die Zuordnung entfernt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Canvas aus dem Speicher als Hintergrund verwenden

// CSS: .banner { background: -moz-element(#muster); }
const canvas = document.createElement('canvas');
canvas.width = 40;
canvas.height = 40;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#eef';
ctx.fillRect(0, 0, 40, 40);
ctx.fillStyle = '#88c';
ctx.fillRect(0, 0, 20, 20);
ctx.fillRect(20, 20, 20, 20);

if (typeof document.mozSetImageElement === 'function') {
  document.mozSetImageElement('muster', canvas);
} else {
  // Fallback für andere Browser
  document.querySelector('.banner').style.backgroundImage = `url(${canvas.toDataURL()})`;
}

Animierter Hintergrund per requestAnimationFrame

// CSS: body { background: -moz-element(#animation) no-repeat center; }
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 200;
const ctx = canvas.getContext('2d');
document.mozSetImageElement?.('animation', canvas);

let winkel = 0;
const zeichne = () => {
  ctx.clearRect(0, 0, 200, 200);
  ctx.beginPath();
  ctx.arc(100 + Math.cos(winkel) * 60, 100 + Math.sin(winkel) * 60, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'tomato';
  ctx.fill();
  winkel += 0.05;
  requestAnimationFrame(zeichne); // Hintergrund aktualisiert sich automatisch
};
zeichne();

Zuordnung wieder entfernen

const hintergrundZuruecksetzen = () => {
  if ('mozSetImageElement' in document) {
    document.mozSetImageElement('muster', null);
    console.log('Zuordnung für #muster entfernt');
  }
};
hintergrundZuruecksetzen();

Zuordnung für #muster entfernt

// Wichtig · Fallstricke

Nicht standardisiert: Die Methode gibt es nur in Firefox, und sie ist nicht Teil einer Spezifikation. Chrome, Safari und Edge kennen weder mozSetImageElement() noch -moz-element(). Die standardisierte CSS-Funktion element() (CSS Images Level 4) wird bisher praktisch nicht unterstützt.

Prüfen Sie vor dem Aufruf, ob die Methode existiert (typeof document.mozSetImageElement === 'function'), und sehen Sie einen Fallback vor, zum Beispiel canvas.toDataURL() oder canvas.toBlob() in Verbindung mit URL.createObjectURL().
Eine per mozSetImageElement() gesetzte Zuordnung hat Vorrang vor einem Element im Dokument, das dieselbe id trägt.
Ein ständig neu gezeichneter Hintergrund, etwa von einem animierten Canvas oder einem Video, kostet Rechenleistung, weil der Browser das Element bei jeder Änderung neu darstellen muss.
Für Produktivcode ist die Methode nicht zu empfehlen. Sie eignet sich eher für Experimente oder Firefox-spezifische Erweiterungen.

Siehe auch

Document.getElementById() HTMLCanvasElement.toDataURL() HTMLCanvasElement.toBlob() CanvasRenderingContext2D URL.createObjectURL() DocumentFragment.replaceChildren() new PaymentMethodChangeEvent()