CSSMediaRule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSSMediaRule 接口表示一个单独的 CSS @media 规则。
实例属性
继承其父接口 CSSConditionRule、CSSGroupingRule 和 CSSRule 的属性。
CSSMediaRule.media只读-
返回一个表示样式信息所针对的目标媒介的
MediaList对象。
实例方法
没有特定的方法；它继承其父接口 CSSConditionRule、CSSGroupingRule 和 CSSRule 的方法。
示例
下面的 CSS 包含一个带有样式规则的媒体查询。由于该规则存在于文档中最后添加的样式表中，所以它会成为文档中最后一个样式表返回的第一个 CSSRule（即 document.styleSheets[document.styleSheets.length-1].cssRules 的第一个）。myRules[0] 返回一个 CSSMediaRule 对象，我们可以从中获取 mediaText。
html
<p id="log"></p> css
@media (width >= 500px) { body { color: blue; } } js
const log = document.getElementById("log"); const myRules = document.styleSheets[document.styleSheets.length - 1].cssRules; const mediaList = myRules[0]; // 一个表示该媒体查询的 CSSMediaRule 对象。 log.textContent += ` ${mediaList.media.mediaText}`; 规范
| Specification |
|---|
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |