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

Question

通常，当我不使用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根据媒体查询的要求“看到”正确的样式表？

Answer 1

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

在您的代码中，您永远不会看到绿色的Rul，因为您只需要遍历第一个CSSRuleList的项目。 这里的窍门是，您需要递归地遍历CSSMediaRule并包含其自己的CSSRuleList所有其他规则。 对于您来说， sheet.rules包含一个CSSSyleRule （这是您的.foo { color:red; } ）和CSSMediaRule （这是您的媒体查询）。 第二条规则然后是它自己的CSSRuleList ，您可以遍历该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);

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

问题描述

1 个解决方案

解决方案1
3 2013-06-07 21:52:36

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

问题描述

1 个解决方案

解决方案1 3 2013-06-07 21:52:36

解决方案1
3 2013-06-07 21:52:36