一直忙没更新,总结下近期开发中使用的关于提取css渲染树样式的方法

?

提取渲染样式

IE从domElement.currentStyle对象中提取即时计算的样式
标准浏览器使用window.getComputedStyle方法获取
IE下还有个runtimeStyle对象,可以应用样式又不改变DOM的style属性,
理解为runtimeStyle用于运行时写入样式,currentStyle用于为读取渲染后的样式

* jQuery的css()方法已经处理了二者的兼容,可以通过css()方法提取渲染后的样式值,但在实际应用还会遇到一些问题,下面说一说解决这些问题的方法

?

?

伪类样式获得方法

标准浏览器通过getComputedStyle方法可以获得伪类style对象,如下方法
window.getComputedStyle(domElement,':after);
jQuery css()方法中后边参数都是null,所以无法去取伪类的样式.

ie不支持此方发,只能通过,遍历样式表对象,匹配选择器进行查找,这种方式需要css写的比较标准及约定好选择器特征才能准确有效的找到所需样式

?

...
	var more=$('span.morelink');
	if(window.getComputedStyle){
		style=window.getComputedStyle(more[0],':after');
	}else{
		style=getStyleSheet('span.morelink a:after');
	}

	//ie中从styleSheets中获取
	function getStyleSheet(selector){
		var sheets=document.styleSheets,regxp=new RegExp(".*"+selector+"\\s*$","i");
		for(var is=sheets.length-1;is>=0;is--){//反向,由css下部向上查找
			var rules=sheets[is].rules||sheets[is].cssRules;
			for(var ir=rules.length-1;ir>=0;ir--){
				var rule=rules[ir];
				if(rule.selectorText&&regxp.test(rule.selectorText)){
					return rule.style;
				}
			}
		}
	}

?

?

?

获取颜色十六进制标准值

?在ie中通过获得渲染样式 color 或 backgroundColor 得到的值一般是#FFFFFF这种16进制的形式
而在ff等标准浏览器得到的是rgb(255, 0, 0)这种形式,可以用以下方法都转换成16进制形式.
在chrome浏览器中透明(transparent)会得到rgba(0, 0, 0, 0),在方法中也处理了.

?

               function rgb2hex(rgb) {
	 if('rgba(0, 0, 0, 0)'==rgb)rgb='transparent';
	 var m= rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/i);
	 if(!m)return rgb;
	 function hex(x) {
	  return ("0" + parseInt(x).toString(16)).slice(-2);
	 }
	 return "#" + hex(m[1]) + hex(m[2]) + hex(m[3]);
	}

?

?

?

获取background-position值

在ie中渲染样式中不能获得background-position,对应的样式被拆成background-position-x和background-position-y
通过以下方法可获得

?

               //以下使用jquery css()方法获得渲染样式
	function getBackgroundPosition(t){
		var v=t.css('background-position');
		if(!v){
			v=t.css('background-position-x')+' '+t.css('background-position-y');
		}
		return v;
	}

?

当background-position中使用百分比时,在ie中不能获得渲染样式的百分比值,只能获得即时计算的px值
如样式设置 background-position:20% 10px ,ie中只能获得对应的px值.(宽度、高度、top、left等值也是如此)
如需获得百分比值,可以在样式表对象中遍历获得.(同上使用getStyleSheet方法)

?

?

2012-5-11更新

?

从当前页面所有样式中(包括import引用的css)查找指定文件中与参数匹配的选择器的样式

selectorRegExp--筛选选择器的正则表达式

cssFileName--css文件名(可选参数)

项目中使用直接粘过来

Ex.fn.getStyle4Sheet=function(selectorRegExp,cssFileName){
		var sheets=document.styleSheets,regexp=selectorRegExp;
		var styles=[];
		var fNameRegex=new RegExp('(.*/)?'+cssFileName+'(\\?.*)?');
		for(var is=sheets.length-1;is>=0;is--){
			var sheet=sheets[is],imports=sheet.imports||getImports(sheet.cssRules);
			var rules=sheet.rules||sheet.cssRules;
			if(!cssFileName||fNameRegex.test(sheet.href)){
				var t=getStyle4Rules(rules,regexp);
			}
			try{
				findInImports(imports,cssFileName,regexp);
			}catch(e){}
		}
		var style=styles.length?{}:null;
		for(var i=styles.length-1;i>=0;i--){
			for(var k in styles[i]){
				var v=styles[i][k];
				if(v!=''||i==styles.length-1)style[k]=v;
			}
		}
		return style;
		function getImports(rs){
			var result=[];
			if(!rs)return result;
			for(var i=0,n=rs.length;i<n;i++){
				if(rs[i].type==3)result.push(rs[i]);
			}
			return result;
		}
		function findInImports(imports,cssFileName,regexp){
			for(var i=0,n=imports.length;i<n;i++){
				var imp=imports[i];
				if(!cssFileName||fNameRegex.test(imp.href)){
					var rules=imp.rules||imp.styleSheet.cssRules;
					var t=getStyle4Rules(rules,regexp);
				}