Home/ Questions/Q 8578243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T20:20:34+00:00

Using JavaScript, what would be the best way to output a list containing all

  • 0

Using JavaScript, what would be the best way to output a list containing all media queries that are being applied to the current page.

I assume this would need to filtering to find embedded media queries i.e.

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

as well as media queries located in CSS files, i.e.

@media only screen and (min-width: 320px) {}

An example output of what I’m looking for:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check example here with the code to list the media queries that are being applied to the current page

    JavaScript:

    var mediaQueryCount = 0;

$(document).ready(function(){
    $links = $('link[rel="stylesheet"]');
    $.each($links, function(i, item){
        if(item.media){
            mediaQueryCount++;
            var start = item.media.indexOf('(')+1;
            var end = item.media.indexOf(')');
            var str = item.media.substring(start, end);
            var listItem = $('<li />',{
                html: str.split(':')[1]
            }).appendTo("#result");
        }
    });
    $('#totalMedia').text(mediaQueryCount);
});

    HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="only screen and (min-width: 30em)" />
        <link rel="stylesheet"  media="only screen and (min-width: 40em)"/>
        <link rel="stylesheet"  media="only screen and (min-width: 960px)"/>
    </head>
    <body>
        <p>There are <span id="totalMedia"></span> media queries loaded on this page</p>
        <ol id="result">
        </ol>
    </body>
</html>
    • 0