MediaList.toString() — Methode · JavaScript-Referenz

Signatur

MediaList.prototype.toString()

Beschreibung

Die Methode toString() ist der Stringifizierer der Schnittstelle MediaList. Sie gibt alle Media Queries der Liste als einen String zurück, getrennt durch Komma und Leerzeichen, z. B. "screen, print and (orientation: landscape)". Das Ergebnis ist identisch mit dem Wert der Eigenschaft MediaList.mediaText.

Eine MediaList bekommt man zum Beispiel über CSSStyleSheet.media, CSSMediaRule.media oder CSSImportRule.media. Weil toString() ein Stringifizierer ist, wird sie automatisch aufgerufen, wenn die Liste in einem String-Kontext landet, etwa in Template-Literalen, bei der String-Verkettung oder mit String(list).

Praktisch ist die Methode für Debugging, Logging oder um die Medienbedingungen eines Stylesheets zu serialisieren und zu vergleichen. Die Ausgabe ist normalisiert: Der Browser serialisiert die Queries in kanonischer Form. Das Ergebnis kann sich also in Groß-/Kleinschreibung, Leerzeichen und Klammern vom Originaltext im Quelltext unterscheiden.

Rückgabewert

Typ

string

Beschreibung

Die serialisierten Media Queries, getrennt durch ", ". Bei einer leeren Liste ist das ein leerer String "".

Beispiele

Media Queries des ersten Stylesheets ausgeben

// HTML: <link rel="stylesheet" href="app.css" media="screen, print">
const sheet = document.styleSheets[0];
const list = sheet.media;

console.log(list.toString());
console.log(list.toString() === list.mediaText);

screen, print true

Implizite Umwandlung in Template-Literalen

const style = document.createElement('style');
style.media = 'screen and (min-width: 600px)';
style.textContent = 'body { margin: 2rem; }';
document.head.append(style);

const { media } = style.sheet;
media.appendMedium('print');

// toString() wird hier automatisch aufgerufen
console.log(`Aktive Medien: ${media}`);

Aktive Medien: screen and (min-width: 600px), print

Alle @media-Regeln eines Stylesheets auflisten

const style = document.createElement('style');
style.textContent = `
  @media (max-width: 480px) { body { font-size: 14px; } }
  @media print, (prefers-color-scheme: dark) { a { color: gray; } }
`;
document.head.append(style);

const mediaRules = [...style.sheet.cssRules]
  .filter((rule) => rule instanceof CSSMediaRule)
  .map((rule) => rule.media.toString());

console.log(mediaRules);

["(max-width: 480px)", "print, (prefers-color-scheme: dark)"]

// Wichtig · Fallstricke

Die Ausgabe ist die normalisierte Serialisierung des Browsers. Groß-/Kleinschreibung, Leerzeichen und Klammerung können vom Originaltext abweichen, zum Beispiel "SCREEN" → "screen". Einen direkten Stringvergleich mit dem Quelltext solltest du deshalb vermeiden.
Ungültige Media Queries werden oft als "not all" serialisiert.
Die Methode liest nur. Zum Ändern nimmst du mediaText (Schreibzugriff), appendMedium() oder deleteMedium().
Bei Stylesheets von fremden Ursprüngen ohne CORS löst schon der Zugriff auf cssRules einen SecurityError aus. sheet.media bleibt dagegen lesbar.
Wird in allen modernen Browsern unterstützt. Der Wert entspricht immer mediaText.

Siehe auch

MediaList MediaList.mediaText MediaList.appendMedium() MediaList.deleteMedium() CSSStyleSheet CSSMediaRule MediaKeyStatusMap.entries()