CSSMediaRule
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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
| Specification |
|---|
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |
Browser-Kompatibilität
Loading…