1

通常，当我不使用 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;
    }
}

...red如果我将窗口缩小到小于600px.

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

无论如何要纠正这个问题，以便 Javascript 根据媒体查询的要求“看到”正确的样式表？

4

1 回答 1

4

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

在您的代码中，您永远不会看到绿色规则，因为您只是在迭代 first 中的项目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);
于 2013-06-07T21:52:36.833 回答