Native pngfix (making ie support PNG transparent)

The problem was quickly discovered because of the class library conflict, that is, the $ conflict caused by the introduction of two class libraries.

I did not pay much attention to this aspect before. I looked at the source code out of curiosity and found it really unsightly. I suddenly tried to use the native js to refactor it again. As follows:

/** * 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') || documentYS.pngFix = function(elem) {// IE 6if (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 imgfunction 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 nodespanP = 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 nodespan = 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 changeimg.parentNode.replaceChild(spanP, img);}}}// fix css background pngsfunction 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-sourcefunction 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);}};

Among them, the biggest problem encountered by YSS is the problem of obtaining background-image. There are three possible values obtained through 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 );

So we need to match and delete through the regular expression, to get: http://www.test.com/1.png