确定所有屏幕尺寸的元素样式

Question

In Javascript we can use something like window.getComputedStyle(element,null).getPropertyValue(property) to retrieve a given element's style property. That being said, any property can change with responsive web design at any screen size.

I'm wondering if it's possible to analyze the element's related stylesheet to determine the styles that will be applied to it at a all window sizes/breakpoints.

For example, a <p> has font-size: 16px on desktop, and font-size: 18px on mobile (set by @media (max-width: 768px) { ... } . I'd like to know that the font size will be 18px on mobile without having to resize down to mobile size and sample the font size again.

I suppose with some clever text processing in JS I could sort through a stylesheet for @media and see if it reflects on the element, but for larger or multiple stylesheets, inline styles, and injected styles that method would likely be impossible to get 100% accurate.

Any ideas?

Thought...

Is it possible to wrap an element in a simulated (hidden) window element and then use JS to resize it so it triggers the media queries?

Another approach...

I started playing around with document.styleSheets but even that seems like a pretty impossible task to get perfect. In my example below I have wrapped some selected text in an element and then passed it to the method below (written in coffeescript).

analyzeSelectiontyles: (selectionElement) ->
    selectionParents = []
    while selectionElement
        selectionParents.unshift selectionElement
        selectionElement = selectionElement.parentNode

    pageStylesheets = document.styleSheets

    for stylesheet in pageStylesheets
        rules = stylesheet.cssRules
        for rule of rules
            if rules[rule]["type"] is 1
                console.log 'standard style'
            if rules[rule]["type"] is 4
                console.log 'media query'
            # If it's a standard style rule or a media query containing
            # style rules we have to check to see if the style rule applies
            # to any one of our selectionParents defined above, and in
            # Which order so as to simulate "cascading"

Answer 1

Something like the following might work iff all of the styles are hosted on the same origin . I tested it here and it couldn't get the all.css file; I assume because it is hosted on a different cdn domain.

function css(element) {
    var sheets = document.styleSheets,
    standard = [],
    mediaStyles = {};
    element.matches = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || element.oMatchesSelector;

    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (element.matches(rules[r].selectorText)) {
                if (rules[r]["type"] === 4) {
                    mediaStyles[rules[r].media] = (mediaStyles[rules[r].media] || []).push(rules[r].cssText);
                } else {
                    standard.push(rules[r].cssText);
                }
            }
        }
    }

    return { 'standard': standard, 'media': mediaStyles };
}

Answer 2

If you would like to retrive all css rules for a specific element (especially a mediaquery), then you don't have to parse each css file. You can use window.getMatchedCSSRule . After that, check the returned css rules if they have a mediaquery parent rule.