如何在 javascript 中获取 CSS 媒体属性

【问题标题】：How can I get CSS media properties in javascript如何在 javascript 中获取 CSS 媒体属性
【发布时间】：2020-04-21 09:18:24
【问题描述】：

我可以在 Javascript 中进行@media 查询（例如，检查网页是否与@media (max-width: 640px) 匹配）。但是，我似乎找不到任何方法来找到实际的 @media 属性本身。例如，monochrome 值、aspect-ratio 或 color-index。

我可以使用大量 MediaQueryList 查询来强制它，但这似乎是一种糟糕的方法。

我是否遗漏了一些明显的东西？我还没有找到任何方法来做到这一点。

谢谢

【问题讨论】：

标签： javascript css media-queries

【解决方案1】：

您可以访问 styleSheet 数组中的所有 CSS 规则。

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;

【讨论】：

有点奇怪的是，styleSheets 并未作为 document 的属性包含在 MDN 中。但是，document.styleSheets 在StyleSheetList object 的示例中给出。另外值得注意的是，styleSheet.cssRules || styleSheet.rules 是跨浏览器支持所必需的，而 cssRules 是标准化的方式。 :-)
啊，但那些是规则 - 我对规则不感兴趣，我想要属性。