用 javascript 获取页面上有选择符的 CSS 规则

 
<script type="text/javascript"> 
/* ################################################### 
 * 说明：用 javascript 获取页面上有选择符的 CSS 规则 
 *       包括'内部样式块'和'外部样式表文件' 
 * 作者：Yanfu Xie [xieyanfu@yahoo.com.cn] 
 * 网址：http://www.CodeBit.cn 
 * 日期：2007.01.16 
 * #################################################*/ 
function getCssRule() 
{ 
    // 样式总数 
    var styleSheetLen = document.styleSheets.length; 
 
    if(!styleSheetLen) return; 
 
    // 样式规则名称，IE 和 FireFox 不同 
    var ruleName = (document.styleSheets[0].cssRules)?'cssRules':'rules'; //FireFox:cssRules || IE:rules 
 
    // 初始结果 
    var result = {}; 
 
    var totalRuleLen = 0; 
 
    var totalSelectorLen = 0; 
 
    var totalProperty = 0; 
 
    for(var i=0; i<styleSheetLen; i++) 
    { 
        // 获取每个样式表定义 
        var styleSheet = document.styleSheets[i]; 
 
        // 每个样式表的规则数 
        var ruleLen = styleSheet[ruleName].length; 
 
        totalRuleLen += ruleLen; 
 
        for(var j=0; j<ruleLen; j++) 
        { 
            // 获取当前规则的选择符 
            // 传入选择符转换为小写 
            var selectors = styleSheet[ruleName][j].selectorText.toLowerCase().split(","); 
 
            var selectorLen = selectors.length; 
 
            totalSelectorLen += selectorLen; 
 
            for(var s=0; s<selectorLen; s++) 
            { 
                // 去除选择符左右的空格 
                selector = selectors[s].replace(/(^\s*)|(\s*$)/g, ""); 
 
                // 初始化当前选择符 
                result[selector] = {}; 
 
                // 获取当前样式 
                var styleSet = styleSheet[ruleName][j].style; 
 
                for (property in styleSet) 
                { 
                    // 获取规则 
                    if(styleSet[property] && property != 'cssText') 
                    { 
                        //alert(selector +'=>'+ property +':'+ styleSet[property]) 
                        result[selector][property] = styleSet[property]; 
 
                        totalProperty += 1; 
                    } 
                } 
            } 
        } 
    } 
 
    // 统计数据 
    result.totalSheet = styleSheetLen;    //样式块 
    result.totalRule = totalRuleLen;    //规则数 
    result.totalSelector = totalSelectorLen;    //选择符 
    result.totalProperty = totalProperty;    //属性 
 
    return result; 
} 
</script> 
 

 
<link rel="stylesheet" type="text/css" href="test.css"  /> 
 
<style type="text/css"> 
a.Code, a.Test { 
    color:#fff; 
    background:#eee; 
} 
.class { 
    border-top:1px solid #eee; 
} 
</style> 
 
<script language="JavaScript" type="text/javascript"> 
 
// 获取规则 
var css = getCssRule(); 
 
// 获取指定选择符下面的 CSS 属性值 
// selector:选择符（小写） 
// attribute:查询的 CSS 属性，脚本模式（如：background-color 为 backgroundColor） 
function getCssValue(selector, attribute) 
{ 
    return (css[selector])?(css[selector][attribute])?css[selector][attribute]:false:false; 
} 
 
document.write("<strong>统计数据</strong> <br />"); 
document.write(css.totalSheet + " 个 CSS 样式块（包括&lt;link /&gt;标签和&lt;style&gt;&lt;/style&gt;样式块） <br />"); 
document.write(css.totalRule + " 条规则（FireFox 下分组选择符如：body, form, p {} 算一条， IE 将分开计算） <br />"); 
document.write(css.totalSelector + " 个选择符（将分组选择符分开计算） <br />"); 
document.write(css.totalProperty + " 条 CSS 属性（如：border:1px solid #eee;） <br /><br />"); 
 
// 传入选择符为小写，属性为脚本模式 
document.write("<strong>选择符为 'a.test' 的背景颜色(backgroundColor) 为：</strong> <br />"); 
document.write("<strong>语法：</strong>getCssValue('a.test', 'backgroundColor'); <br />"); 
document.write("<strong>结果：</strong>" + getCssValue('a.test', 'backgroundColor') + "<br />"); 
document.write("IE 直接返回属性值，但 FireFox 返回 RGB 值"); 
 
</script>