HTMLMarqueeElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLMarqueeElement extends HTMLElement

Beschreibung

HTMLMarqueeElement steht für das veraltete HTML-Element <marquee>. Dieses lässt Text oder andere Inhalte als Lauftext durch seinen Bereich wandern. Die Schnittstelle erbt von HTMLElement. Jede Eigenschaft entspricht dabei einem gleichnamigen HTML-Attribut, das Sie also auch per Skript lesen und setzen können.

Die wichtigsten Eigenschaften:

behavior (string): Art der Bewegung, "scroll" (Standard), "slide" oder "alternate".
direction (string): Richtung, "left" (Standard), "right", "up" oder "down".
scrollAmount (number): Schrittweite in Pixeln pro Schritt (Standard 6).
scrollDelay (number): Pause zwischen zwei Schritten in Millisekunden (Standard 85). Werte unter 60 werden auf 60 angehoben, außer trueSpeed ist gesetzt.
trueSpeed (boolean): Setzt diese Untergrenze von 60 ms außer Kraft.
loop (number): Anzahl der Durchläufe; -1 (Standard) bedeutet endlos.
bgColor, width, height (string), hspace, vspace (number): Hintergrundfarbe, Größe und Außenabstände.

Mit den Methoden start() und stop() setzen Sie die Bewegung fort bzw. halten sie an. Beide erwarten keine Argumente und geben undefined zurück. Die Schnittstelle hilft vor allem bei der Pflege alter Seiten. In neuen Projekten sollten Sie Lauftexte mit CSS-Animationen (@keyframes mit transform) oder der Web Animations API umsetzen.

Rückgabewert

Typ

HTMLMarqueeElement

Beschreibung

Instanzen bekommen Sie über document.createElement("marquee") oder über DOM-Abfragen wie querySelector("marquee"). Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Marquee per Skript erzeugen und konfigurieren

const marquee = document.createElement("marquee");
marquee.textContent = "+++ Eilmeldung: Wartungsarbeiten heute ab 22 Uhr +++";
marquee.behavior = "scroll";
marquee.direction = "left";
marquee.scrollAmount = 4;
marquee.loop = -1; // endlos
document.body.prepend(marquee);

console.log(marquee instanceof HTMLMarqueeElement);
console.log(marquee.scrollDelay);

true 85

Lauftext anhalten, solange die Maus darüber ist

// HTML: <marquee id="ticker">Aktuelle Angebote ...</marquee>
const ticker = document.querySelector("#ticker");

ticker.addEventListener("mouseenter", () => ticker.stop());
ticker.addEventListener("mouseleave", () => ticker.start());

Reduzierte Bewegung respektieren

const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)");

const applyMotionPreference = () => {
  document.querySelectorAll("marquee").forEach((m) => {
    prefersReducedMotion.matches ? m.stop() : m.start();
  });
};

applyMotionPreference();
prefersReducedMotion.addEventListener("change", applyMotionPreference);

Moderne Alternative mit der Web Animations API

// HTML: <div class="ticker"><span id="text">Neuigkeiten ...</span></div>
// CSS: .ticker { overflow: hidden; white-space: nowrap; }
const text = document.querySelector("#text");
text.style.display = "inline-block";

const animation = text.animate(
  [{ transform: "translateX(100vw)" }, { transform: "translateX(-100%)" }],
  { duration: 12000, iterations: Infinity }
);

text.addEventListener("mouseenter", () => animation.pause());
text.addEventListener("mouseleave", () => animation.play());

// Wichtig · Fallstricke

Veraltet: <marquee> ist in HTML als veraltet eingestuft. Chrome, Edge, Firefox und Safari unterstützen es weiterhin, doch es kann künftig wegfallen. Für neuen Code sollten Sie es nicht mehr verwenden.
Events: Die früheren Ereignisse start, finish und bounce (bzw. onstart, onfinish, onbounce) sind aus der Spezifikation gestrichen. Sie funktionieren nicht in allen Browsern zuverlässig, darauf sollten Sie sich also nicht verlassen.
Barrierefreiheit: Bewegter Text ist schwer zu lesen und kann Menschen mit Aufmerksamkeitsstörungen oder vestibulären Beschwerden belasten. Nach WCAG 2.2.2 müssen Nutzer Bewegungen, die länger als 5 Sekunden laufen, anhalten können. Außerdem sollten Sie prefers-reduced-motion beachten.
Tempo: Ohne trueSpeed wird scrollDelay nie kleiner als 60 ms. Sehr kleine Werte führen deshalb nicht zu schnellerer Bewegung.
Zuweisungen an behavior und direction spiegeln sich direkt im jeweiligen Attribut wider. Ungültige Werte führen auf den Standardwert zurück.

Siehe auch

Element.prototype.animate() Animation HTMLMeterElement HTMLAreaElement HTMLBaseElement