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

本文介绍了一个通用函数,用于获取不同浏览器下元素的真实样式值,并针对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、付费专栏及课程。

余额充值