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

Question

If I have two stylesheets set with media queries:

<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' />

And I'm looking for a class in document.styleSheets , how would I be able to ignore the non-active stylesheet?

For example:

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

Is there a way to know?

Answer 1

There's a nice Js feature called window.matchMedia() , that can be used to test if a certain media query matches to the viewport, for example:

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

If you can iterate through all link tags, you could test each media attribute and check if it is applied.

MDN .matchMedia() docs