原生的pngFix（让IE支持PNG透明）

由于帮人解决IE6 png不透明的bug，看到了对方使用jquery的pngfix，问题很快就找到了，是因为类库冲突，也就是引入了两个类库导致的$冲突。

自己之前很少关注这方面东西，出于好奇看了一下源码，发现实在不堪入目，就突发奇想采用原生的JS重构了一遍。如下：

/**
 * png fix by yansong at 2011-12-07
 *
 * @example $.ready(function(){YS.pngFix();});
 * @desc Fixes all PNG's in the document on document.ready
 *
 * @example $.ready(function(){YS.pngFix(document.getElementById('examples'));});
 * @desc Fixes all PNG's within div with class examples
 *
 */

// elem: document.getElementById('#example') || document
YS.pngFix = function(elem) {

	// IE 6
	if (document.uniqueID && !window.XMLHttpRequest) {
		if(elem !== undefined){
			if(elem.tagName == 'IMG'){
				fixImg(elem);
				return;
			}
			if(elem.tagName == 'INPUT'){
				fixInput(elem);
				return;
			}
			fixBg([elem]);
		}else{
			elem = document;
		}
		var reg1 = new RegExp().compile('url[\(][\'\"]?'),
			reg2 = new RegExp().compile('[\'\"]?[\)]');
		
		// fix img
		function fixImg(elem){
			var imgs = elem.getElementsByTagName('img'),
				len = imgs.length,
				img,
				spanP,
				span,
				spanStyle,
				width,
				height;
			//console.log(len)
			while(len--){
				img = imgs[len];
				width = img.width || img.currentStyle.width;
				height = img.height || img.currentStyle.height;
					//console.log(1);
				if(img.src.indexOf('.png') !== -1){
					// parent node
					spanP = document.createElement('span');
					spanStyle = spanP.style;
					spanStyle.position = 'relative';
					spanStyle.display = 'inline';
					spanStyle['float'] = img.currentStyle['float']||'none';
					spanStyle.border = img.currentStyle.border||'none';
					spanStyle.padding = img.currentStyle.padding||'0';
					spanStyle.margin = img.currentStyle.margin||'0';
					spanStyle.cursor = img.parentNode.currentStyle.cursor;
					// chidren node
					span = document.createElement('span');
					spanP.appendChild(span);
					spanStyle = span.style;
					spanStyle.cssText = 'position:relative;white-space:pre-line;display:inline;background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + img.src + '\', sizingMethod=\'crop\');';
					spanStyle.width = width;
					spanStyle.height = height;
					span.id = img.id;
					span.className = img.className;
					span.title = img.title;
					span.alt = img.alt;
					
					// do change
					img.parentNode.replaceChild(spanP, img);
				}
			}
		}
		
		// fix css background pngs
		function fixBg(elems){
			var len = elems.length, elem, bg;
			while(len--){
				elem = elems[len];
				bg = elem.currentStyle.backgroundImage;//console.log(bg);
				if(bg.indexOf('.png') != -1){
					elem.style.backgroundImage = 'none';
					// url('......') | url("...") | url(...)
					elem.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bg.replace(reg1, '').replace(reg2, '') + "',sizingMethod='crop')";
				}
			}
		}
		
		//fix input with png-source
		function fixInput(elem){
			var inputs = elem.getElementsByTagName('input'), len = inputs.length, input, src;
			while(len--){
				input = inputs[len];
				src = input.src;
				if(src&&src.indexOf('.png')!=-1){
					input.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + src + '\', sizingMethod=\'crop\');';
					input.src = 'blank.gif';
				}
			}
		}
		
		fixBg(elem.all);
		fixImg(elem);
		fixInput(elem);
		
	}

};

其中yss遭遇到的最大问题就是在获取background-image时的问题，通过elem.currentStyle.backgroundImage获取到的值有三种情况：

1. url('http://www.test.com/1.png');

2. url("http://www.test.com/1.png");

3. url(http://www.test.com/1.png);

所以需要通过正则表达式去匹配并删除，来获取到：http://www.test.com/1.png