如何使用jQuery（或类似的）来提取所有的CSS

Question

给定一个已加载（可能是几个）CSS文件和内联样式的网页，通过使用：

<link rel="stylesheet" type="text/css" href="some_file.css" />
<style type="text/css"> /* some css rules */  </style>
<link rel="stylesheet" type="text/css" href="some_other_file.css" />
<style type="text/css"> /* some other css rules */  </style>      
<!-- etc -->

如何编写一个函数（可能使用jQuery）来提取所有有效的CSS CSS规则？

Answer 1

我不确定你想用它做什么，但这应该让你开始：

function getStyles() {
    if(!document.styleSheets) return false; // return false if browser sucks
    var rules = new Array();
    for (var i=0; i < document.styleSheets.length; i++) {
        var x = 0;
        styleSheet = document.styleSheets[i];
        if(styleSheet.cssText) { // if this is IE, get the rules directly
            rules.push(styleSheet.cssText);
        } else {
            // otherwise get them individually
            do {
                cssRule = styleSheet.cssRules[x];
                if(cssRule) rules.push(cssRule.cssText);
                x++;
            } while (cssRule);
        }
    }
    return rules;
}

当你调用它时，它将返回所有规则的数组。在Firefox中测试，IE。