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

本文介绍的方法可以返回页面上有选择符的 CSS 规则，支持 <link /> 标签和页面内部 <style></style> 样式块，可以返回指定选择符下指定属性的值。

用 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>

IE 和 FireFox 将自动添加一些规则，比如你只定义 border:1px solid #eee; 它们会自动添加 borderTop, borderBottom, borderLeft, borderRight 的值，在返回值上两个浏览器的处理方法也不同，比如颜色，FireFox 会返回 RGB 格式的颜色值，而 IE 则直接返回规则中的属性值，但这些并不影响应用。