使用 Javascript（和媒体查询）获取 CSS 样式表属性答案

【问题标题】：Get CSS style sheet property using Javascript (and media query)使用 Javascript（和媒体查询）获取 CSS 样式表属性
【发布时间】：2013-06-08 06:05:35
【问题描述】：

一般来说，当我不使用 JQuery 时，我会使用以下实用函数来使用 Javascript 从样式表中获取属性。这可以很好地从 CSS 样式表中获取值：

<!DOCTYPE html>
<html>
<head>

<style>

.foo {
    color: red;
}

</style>

<script type = "text/javascript">
function getcss(selector, property) 
{
    var len = document.styleSheets.length;

    for (var idx = 0; idx < len; ++idx)
    {
        var sheet = document.styleSheets && document.styleSheets[idx]; 

        if (sheet)
        {
            var r = sheet.rules ? sheet.rules : sheet.cssRules; 
            if (r) 
            {
                var i = r.length; 
                while (i--)
                {
                    if (r[i].selectorText && r[i].selectorText.toLowerCase() === selector.toLowerCase()) 
                    {
                        return (r[i].style[property]);
                    }
                }
            }
        }
    }

    return null;
}

function exec()
{
    alert(getcss(".foo", "color"));
}
</script>
</head>

<body onload = "exec()">
</body>
</html>

问题在于它没有考虑媒体查询。如果我将上述代码的 <style> 部分替换为：

.foo {
    color: red;
}

@media screen and (max-width: 600px) {
    .foo {
        color: green;
    }
}

...如果我将窗口缩小到小于600px，它仍然会输出red。

这是正确的 WC3 行为吗？或者这是一个浏览器错误？（我在 Ubuntu 上使用 Firefox 12 进行测试）。

有没有办法纠正这个问题，以便 Javascript 根据媒体查询的要求“看到”正确的样式表？

【问题讨论】：

查看 respond.js 以及它是如何做到的。我个人不知道，但它是媒体查询的 polyfill，所以它必须做你所说的
你返回第一个匹配，在 CSS 中，通常最后一个匹配更有可能被应用。可以肯定的是，要确定会很复杂，并且您必须以某种方式解析/测试媒体查询。

标签： javascript html css media-queries

【解决方案1】：

您的代码只是查看样式表的规则，并且只查看第一个规则列表。规则是样式表的对象表示——它们不会因为您调整了浏览器的大小而改变。

在您的代码中，您永远不会看到绿色规则，因为您只是在迭代第一个 CSSRuleList 中的项目。这里的诀窍是您需要递归循环任何其他规则 CSSMediaRule 并包含它们自己的 CSSRuleList。对您而言，sheet.rules 包含单个 CSSSyleRule（这是您的 .foo { color:red; }）和 CSSMediaRule（这是您的媒体查询）。第二条规则是它自己的CSSRuleList，你可以遍历它来找到你的绿色。

在这种情况下，这是您的数据所在的位置：

// Assuming sheet 0 is your stylesheet above    
var sheet = document.styleSheets[0];

// First rule is ".foo { color: red; }"
console.log(sheet.cssRules[0].cssText);

// Second Rule is your "@media" and its first rule is ".foo { color: green; }"
console.log(sheet.cssRules[1].cssRules[0].cssText);

【讨论】：