javascript中获取页面所有选择符的css规则实现代码

<script type="text/javascript">
/* ###################################################
* 说明：用 javascript 获取页面上有选择符的 CSS 规则
* 包括'内部样式块'和'外部样式表文件'
* 作者：Yanfu Xie [xieyanfu@yahoo.com.cn]
* 网址：http://www.111cn.net
* 日期：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>