currentStyle IE和ff 获取外联样式(转自:http://hi.baidu.com/aganle/blog/item/86109bcf27d2b70b93457e41.html)

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取值时进行

你可能感兴趣的:(currentStyle)