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

本文介绍了一个通用函数,用于获取不同浏览器下元素的真实样式值,包括处理color值的格式化问题。该函数支持IE、Firefox、Opera等浏览器,并针对color属性进行了特别处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值