Accessing @media css properties using jQuery regardless of screen resolution_问答_开发者

In an example below, I am using @media queries to adjust the size of a 'layout' as the screen resolution changes.

/* styles for small screen and preview */
@media only screen and (min-width: 600px) {
    #layout { width: 500px; height: 500px; }
}

/* styles for large screen */
@media only screen and (min-width: 900px) {
    #layout { width: 800px; height: 800px; }
}

That all works fine and dandy, but I would also like to access the css properties of the smaller layout using jQuery to create a preview of it. Because the preview will require some manipulation (e.g. it will be a smaller percentage of the original height and width), I would like to use jQuery to calculate the dimensions of the preview programmatically (rather than simply hard-code it).

So my question is, is there a way using jQuery to access the css properties of the smaller layout, regardless of screen resolution?

Note: the above example is a simplification of what I need to do in a wider use case, so I'm pretty clear on the need for this. I also need to do this many hundreds of times for different layouts (each with their own style sheets), so ideally want a programmatic way to do this.

Any help much appreciated!

EDIT

For interest, I've attached an example following on from Björn's advice. There may be more elegant ways to do it, but it works for me.

<html>
<head>
<title>Example: accessing @media css properties</title>
<style>
/* default styles for tiny screen */
#preview { background: #ccf; }
#layout  { width: 300px; height: 300px; background: #eee; }

/* styles for small screen and preview */
@media only screen and (min-width: 600px) {
    #layout { width: 50开发者_开发百科0px; height: 500px; background: #cdf; }
}

/* styles for large screen */
@media only screen and (min-width: 900px) {
    #layout { width: 800px; height: 800px; background: #ffc; }
}
</style>
<script src="jquery.js"></script>
<script>
$(function() {
    // first style sheet in page (only one in this example)
    var styles = document.styleSheets[0]; 

    for (i=0;i<styles.cssRules.length;i++) {
        theRules = styles.cssRules[i];
        // type 4 = media rules; media.mediaText = we can pick the media styles we want
        if (theRules.type == 4 && theRules.media.mediaText == 'only screen and (min-width: 600px)') {
            // media rules have their own cssRules collection
            // cssRules[0] = the first rule, i.e. #layout
            var layoutwidth = theRules.cssRules[0].style.width;
            var layoutheight = theRules.cssRules[0].style.height;
            var previewscale = 5;           
            var previewwidth = Math.round(parseInt(layoutwidth )/previewscale);
            var previewheight = Math.round(parseInt(layoutheight)/previewscale);
            // now I can set my preview dimensions      
            $('#preview').width(previewwidth).height(previewheight);            
            console.log('Preview dimensions: ' + previewwidth + ' x ' + previewheight);
        }
    }

});         
</script>
</head>
<body>
<div id="layout">layout
    <div id="preview">preview</div>
</div>
</body>
</html>

Console will show:

Preview dimensions: 100 x 100

You can access the document's stylesheets through the document.stylesheets object.

For instance, this will output the first css-rule found in the first stylesheet present on the page:

console.log(document.styleSheets[0].cssRules[0].cssText);

You could use regular expressions or something on these object to get the set of rules for the declarations you want (once you have determined in which of the document's styleSheet object they are declared), and apply these rules to a newly created styleSheet ($("<style />") should work.

I'm not quite sure how you are going to preview the smaller version, so it's unclear to me how to apply this new styleSheet to the preview, but I hope this is enough to get you started.

For more info on the styleSheet object, see http://www.javascriptkit.com/domref/stylesheet.shtml