Javascript获取css点染样式值技巧

Javascript获取css渲染样式值技巧

一直忙没更新,总结下近期开发中使用的关于提取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写的比较标准及约定好选择器特征才能准确有效的找到所需样式

?

?
?
?
获取background-position值
在ie中渲染样式中不能获得background-position,对应的样式被拆成background-position-x和background-position-y
通过以下方法可获得
?
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);}findInImports(imp.imports||getImports(imp.styleSheet.cssRules),cssFileName,regexp);}}function getStyle4Rules(rules,regexp){for(var ir=rules.length-1;ir>=0;ir--){var rule=rules[ir];if(rule.selectorText&&regexp.test(rule.selectorText)){styles.push(rule.style);}}}}
?
再整理出此类技巧会更新本篇。。。。。。。