获取外联样式
2008年05月20日 | JavaScript
IE及OP可使用currentStyle,具体用法可参考《DHTML手册》
Firefox等浏览器可以使用下面的方式来获取
window.getComputedStyle(element,'').getPropertyValue(stylevalue);
注意这2中方式都是只读的。
于是写了个公用的函数:
function getStyle(ele,value) {/*----- 获取元素的真实style -----*/ var rs; if(ele.style[value]) { rs = ele.style[value]; }else if(window.getComputedStyle) { value=value.replace(/([A-Z])/g,"-$1"); rs = window.getComputedStyle(ele,'').getPropertyValue(value); if(value == 'color') {rs = colorToHex(rs);} //格式化color为16进制表示 }else if(ele.currentStyle) { rs = ele.currentStyle[value]; }else { return null; } return rs; }
但各浏览器获取color的值不同(ff/sa为rgb值,op为十六进制值,currentStyle获取的是css里面的原始有效值)
因此需要对color值进行转换(十六进制表示,无法格式化预命名颜色):
function colorToHex(color) {/*----- 以十六进制格式化style中的color,无法格式化预命名颜色 -----*/ var rgb = /rgb\((\d{1,3}),(\s)*(\d{1,3}),(\s)*(\d{1,3})\)/; //rgb正则,结果序数为1、3、5 var noun = /^\w+/; //预命名颜色正则 var rs; if(rgb.test(color)) { var rgbfix = rgb.exec(color); var r,g,b; r = parseInt(rgbfix[1]).toString(16); g = parseInt(rgbfix[3]).toString(16); b = parseInt(rgbfix[5]).toString(16); rs = '#'+(r<10?'0'+r:r)+(g<10?'0'+g:g)+(b<10?'0'+b:b); }else { rs = color; } if(rs.length==4 && !noun.test(rs)) {rs = rs+rs.split('#')[1]}//修正简写的十六进制,采取length判断方式 return rs; }
5.23
修正getPropertyValue方法获取类似于paddingLeft的值的问题
优化效率:有style属性定义时优先取style的值、color值修正仅在getComputedStyle取值时进行

