兑现一个获取元素样式的函数getStyle

实现一个获取元素样式的函数getStyle

实现一个获取元素样式的函数getStyle

2009-1-21 13:58:33

元素的CSS样式，除了包括内联的（即通过style属性加上的）样式定义外，还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el.style.xxx只能获取的内联的样式属性，这就存在比较大的局限性。好在浏览器都提供了另外的方式来获取以其它方式定义的样式属性，在IE中有currentStyle、FF等w3c标准的浏览器中有getComputedStyle。

为便于操作，现在的很多js-lib中都对此做了封装，但很多时候我们并不需要引入什么lib，我们需要的仅仅是一个getStyle函数来获取元素的当前样式定义。参考了几个JS-Lib的代码，决定实现一个简化版的getStyle函数。该函数目标为：满足大多数需要、跨浏览器、代码简洁、性能优良。本着这几点要求，本人花了一个小时的时间才搞定，主要利用了“JS逻辑运算符特性、代码"编译"，函数的即时执行”几个小技巧，写到这里，以备以后使用，如果能对哪位朋友有帮助，那当然更好。

代码如下：

var?getStyle=function(){?????var?f=document.defaultView;?????return?new?Function('el','style',[?????????"style.indexOf('-')>-1?&&?(style=style.replace(/-(\\w)/g,function(m,a){return?a.toUpperCase()}));",?????????"style=='float'?&&?(style='",?????????f???'cssFloat'?:?'styleFloat',?????????"');return?el.style[style]?||?",?????????f???'window.getComputedStyle(el,?null)[style]'?:?'el.currentStyle[style]',?????????'?||?null;'].join(''));?}();??//使用示例：?var?el=document.getElementById('test');?getStyle(el,'line-height');?getStyle(el,'color');?getStyle(el,'float');