准确获取指定元素 CSS 属性值

当处理 DOM 元素的 CSS 属性时,我们经常会遇到一个问题:明明页面上已经定义了 CSS 属性值,但在获取的时候却为空,这是因为任何样式表文件或内联 CSS 预设的样式信息并不能可靠地反映到 style 属性上,本文向你介绍准确获取指定元素 CSS 属性值的方法。

准确获取指定元素 CSS 属性值 – 示例

 
<script type="text/javascript">
 
// 说明:准确获取指定元素 CSS 属性值
// 作者:John Resig 《Pro JavaScript Techniques》
// 来源:http://bbs.blueidea.com/viewthread.php?tid=2745446
// 整理:CodeBit.cn ( http://www.CodeBit.cn )
 
function getStyle( elem, name )
{
	//如果该属性存在于style[]中,则它最近被设置过(且就是当前的)
	if (elem.style[name])
	{
		return elem.style[name];
	}
 
	//否则,尝试IE的方式
	else if (elem.currentStyle)
	{
		return elem.currentStyle[name];
	}
 
	//或者W3C的方法,如果存在的话
	else if (document.defaultView && document.defaultView.getComputedStyle)
	{
		//它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
 
		//获取style对象并取得属性的值(如果存在的话)
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
 
	//否则,就是在使用其它的浏览器
	}
	else
	{
		return null;
	}
}
 
</script>

本文摘录自 John Resig 的《Pro Javascript Techniques》
蓝色 mozart0 版主发布了中文翻译:
http://bbs.blueidea.com/viewthread.php?tid=2733371

用 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 则直接返回规则中的属性值,但这些并不影响应用。