webrebuild.org第四届年会——金秋四城联动

获取外联样式

IE及OP可使用currentStyle,具体用法可参考《DHTML手册》
Firefox等浏览器可以使用下面的方式来获取

javascript
window.getComputedStyle(element,'').getPropertyValue(stylevalue);

注意这2中方式都是只读的。

于是写了个公用的函数:

javascript
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值进行转换(十六进制表示,无法格式化预命名颜色):

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

相关阅读

  1. 页面平滑加载js