Question

在Javascript中，我们可以使用类似window.getComputedStyle(element,null).getPropertyValue(property)的内容来检索给定元素的样式属性。话虽这么说，任何属性都可以随着任何屏幕大小的响应式网页设计而改变。

我想知道是否可以分析元素的相关样式表来确定将在所有窗口大小/断点处应用于它的样式。

例如，<p>在桌面上有font-size: 16px，在移动设备上有font-size: 18px（由@media (max-width: 768px) { ... }设置。我想知道字体大小将在移动设备上显示18px，而无需调整到移动设备尺寸并再次采样字体大小。

我想在JS中有一些聪明的文本处理，我可以对@media的样式表进行排序，看看它是否反映在元素上，但对于更大或更多样式表，内联样式和注入样式，这种方法很可能不可能100％准确。

有什么想法吗？

思想...

是否可以将元素包装在模拟（隐藏）window元素中，然后使用JS调整大小以便触发媒体查询？

另一种方法......

我开始玩document.styleSheets，但即便如此，完美也是一项非常不可能完成的任务。在下面的示例中，我将一些选定的文本包装在一个元素中，然后将其传递给下面的方法（用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

以下内容可能有效 iff 所有样式都托管在same origin上。我在这里测试了它，它无法获得all.css文件;我假设因为它托管在不同的cdn域上。

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

如果您想要检索特定元素（尤其是媒体查询）的所有css规则，那么您不必解析每个css文件。您可以使用window.getMatchedCSSRule。之后，检查返回的css规则是否具有mediaquery父规则。

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

2 个答案: