10

JavaScript を使用して、現在のページに適用されているすべてのメディア クエリを含むリストを出力する最良の方法は何でしょうか。

これは、埋め込まれたメディアクエリを見つけるためにフィルタリングする必要があると思います

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

CSS ファイルにあるメディア クエリと同様に、つまり

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

私が探しているものの出力例:

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

3 に答える 3

9

オブジェクトを使用できMediaQueryListます：

MediaQueryListオブジェクトは、ドキュメントのメディアクエリのリストを維持し、ドキュメントのメディアクエリが変更されたときにリスナーへの通知の送信を処理します。

ニコラスC.ザカスによる関連記事：

http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

別のオプションは、オブジェクトstyleSheetsのプロパティを使用することです。document

var $ol = $('<ol/>');

var styleSheet = document.styleSheets;
$.each(styleSheet, function(i, styleObject) {
   $.each(styleObject.cssRules, function(i, rule){  
      if (rule.media) {
          $ol.append(rule.media[0]) // only screen and (min-width: 481px) and (max-width: 768px)
       }  
   }) 
}) 
var len = $ol.find('li').length;
$('p').text('There are ' + len + ' media queries loaded on this page')
$('body').append($ol)
于 2012-09-16T21:36:28.517 に答える
4

現在のページに適用されているメディア クエリを一覧表示するコードで、こちらの例を確認してください。

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>
于 2012-09-24T12:07:14.737 に答える
2

このリンクをチェックしてください。@sureshunivers コードを使用して、li リストを解析および作成しました。

var sheets = document.styleSheets;  //contains an object of all loaded stylesheets
var rules = sheets[i].cssRules; //The rules variable is list of all the rules of the current stylesheet represented as CSSRule objects.

この記事をチェックしてください- JavaScriptでメディアクエリに反応する

于 2012-09-27T08:42:50.583 に答える