CSSMediaRule
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das CSSMediaRule-Interface repräsentiert eine einzelne CSS @media-Regel.
Instanz-Eigenschaften
Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.
CSSMediaRule.mediaSchreibgeschützt-
Gibt eine
MediaListzurück, die das beabsichtigte Zielmedium für Stilinformationen repräsentiert.
Instanz-Methoden
Keine spezifischen Methoden; erbt Methoden von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.
Beispiele
Das untenstehende CSS enthält eine Media-Abfrage mit einer Stilregel.
Die MDN Live-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Stil mit der ID css-output. Daher verwenden wir zunächst document.getElementById(), um dieses Blatt zu finden.
myRules[0] gibt ein CSSMediaRule-Objekt zurück, aus dem wir den mediaText erhalten können.
<p id="log"></p>
@media (width >= 500px) {
body {
color: blue;
}
}
const log = document.getElementById("log");
const myRules = document.getElementById("css-output").sheet.cssRules;
const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
log.textContent += ` ${mediaList.media.mediaText}`;
Spezifikationen
| Spezifikation |
|---|
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |