如何找出应用的样式表（通过javascript检查）？

Question

如果我有两个设置了媒体查询的样式表：

<link rel='stylesheet' media='only screen and (min-width: 64.1em)' href='desktop.css' />
<link rel='stylesheet' media='only screen and (max-width: 64em)' href='mobile.css' />

我正在寻找document.styleSheets中的课程，我怎么能忽略非活动样式表呢？

例如：

//Pseudo-code
for ( var i = 0; i < document.styelSheets.length; i++ ) if ( document.styelSheets[ i ].isApplied ) ...

有没有办法知道？

Answer 1

这是一个名为window.matchMedia()的优秀Js功能，可用于测试某个媒体查询是否与视口匹配，例如：

if(window.matchMedia('only screen and (min-width: 64.1em)').matches) {
    //match
}
else {
    //don't match
}

如果您可以遍历所有链接标记，则可以测试每个media属性并检查它是否已应用。

MDN .matchMedia() docs