MediaList.length — Eigenschaft · JavaScript-Referenz

Signatur

get MediaList.length

Beschreibung

MediaList.length liefert eine ganze Zahl: die Anzahl der einzelnen Medienabfragen in einer MediaList. Eine solche Liste bekommt man zum Beispiel über CSSStyleSheet.media, CSSMediaRule.media oder CSSImportRule.media. Sie enthält die Medienabfragen, die im media-Attribut eines <link>- oder <style>-Elements, in einer @media-Regel oder in einer @import-Anweisung stehen und dort durch Kommas getrennt sind.

Brauchbar ist die Eigenschaft vor allem, wenn man mit einer klassischen for-Schleife über die Liste läuft. Die Einträge liest man mit MediaList.item(index) oder in Klammerschreibweise (list[i]) aus. Außerdem prüft man damit schnell, ob ein Stylesheet überhaupt an Medienbedingungen gebunden ist. Bei length === 0 gilt es für alle Medien.

Die Eigenschaft ist schreibgeschützt. Die Liste ist dagegen live: Nach appendMedium(), deleteMedium() oder einer Zuweisung an mediaText liefert length sofort den neuen Wert.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ≥ 0 mit der Anzahl der Medienabfragen in der Liste. 0 heißt, dass keine Medienbedingung gesetzt ist.

Beispiele

Anzahl der Medienabfragen eines Stylesheets ermitteln

// <style media="screen and (min-width: 600px), print">…</style>
const sheet = document.styleSheets[0];
console.log(sheet.media.length);
console.log(sheet.media.mediaText);

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

Über alle Medienabfragen iterieren

const style = document.createElement('style');
style.media = 'screen, print, (prefers-color-scheme: dark)';
document.head.append(style);

const { media } = style.sheet;
for (let i = 0; i < media.length; i++) {
  console.log(`${i}: ${media.item(i)}`);
}

0: screen 1: print 2: (prefers-color-scheme: dark)

length ändert sich nach appendMedium() und deleteMedium() (Live-Liste)

const style = document.createElement('style');
document.head.append(style);
const { media } = style.sheet;

console.log(media.length);   // noch keine Bedingung
media.appendMedium('print');
media.appendMedium('screen');
console.log(media.length);
media.deleteMedium('print');
console.log(media.length);

0 2 1

Stylesheets ohne Medienbedingung finden

const universalSheets = [...document.styleSheets]
  .filter((sheet) => sheet.media.length === 0)
  .map((sheet) => sheet.href ?? '(inline)');

console.log(universalSheets);

["https://example.com/base.css", "(inline)"]

// Wichtig · Fallstricke

Schreibgeschützt: Wer media.length = 0 zuweist, erreicht nichts, im Strict Mode gibt es sogar einen TypeError. Um die Liste zu leeren, setzt man media.mediaText = ''.
Kein Array: MediaList hat zwar length und einen Index-Zugriff, aber keine Methoden wie map oder filter. Mit Array.from(media) oder [...media] wandelt man die Liste in ein Array um. Die Liste ist iterierbar.
Ungültige Abfragen: Medienabfragen, die sich nicht korrekt parsen lassen, landen in manchen Fällen als not all in der Liste und zählen dann trotzdem bei length mit.
Nicht verwechseln mit window.matchMedia(). Das liefert eine MediaQueryList, kein MediaList, und hat keine length-Eigenschaft.
Fremde Stylesheets: Bei Stylesheets von einer anderen Herkunft (CORS) lässt sich sheet.media meist trotzdem auslesen. Der Zugriff auf cssRules wird dagegen blockiert.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Baseline).

Siehe auch

MediaList.mediaText NodeList.length FileList.length TouchList.length DOMRectList.length