用JS實現漸層效果，相容各款瀏覽器

以住做B/S的系統都是以IE瀏覽器為主，基本上忽略其他的瀏覽器，這次決定來個大相容，但在實現背景漸層上就是個大麻煩。本想用圖片來實現的，但要兼顧多種解析度實在不好辦，最後在網上找到一個Javascript的實現辦法，相容IE6/7、FF、Safari等，相當完美。好東西不敢獨佔，貼出來大家共用：

<SCRIPT>var setGradient = (function(){//private variables;var p_dCanvas = document.createElement('canvas');var p_useCanvas =  !!( typeof(p_dCanvas.getContext) == 'function');var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;var p_isIE = /*@cc_on!@*/false;//test if toDataURL() is supported by Canvas since Safari may not support ittry{ p_dCtx.canvas.toDataURL() }catch(err){ p_useCanvas = false; };if(p_useCanvas){    return function (dEl , sColor1 , sColor2 , bRepeatY ){if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);if(!dEl) return false;var nW = dEl.offsetWidth;var nH = dEl.offsetHeight;p_dCanvas.width = nW;p_dCanvas.height = nH;var dGradient;var sRepeat;// Create gradientsif(bRepeatY){dGradient = p_dCtx.createLinearGradient(0,0,nW,0);sRepeat = 'repeat-y';}else{dGradient = p_dCtx.createLinearGradient(0,0,0,nH);sRepeat = 'repeat-x';}dGradient.addColorStop(0,sColor1);dGradient.addColorStop(1,sColor2);p_dCtx.fillStyle = dGradient ; p_dCtx.fillRect(0,0,nW,nH);var sDataUrl = p_dCtx.canvas.toDataURL('image/png');with(dEl.style){backgroundRepeat = sRepeat;backgroundImage = 'url(' + sDataUrl + ')';backgroundColor = sColor2;    };   }}else if(p_isIE){p_dCanvas = p_useCanvas = p_dCtx =  null;return function (dEl , sColor1 , sColor2 , bRepeatY){if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);if(!dEl) return false;dEl.style.zoom = 1;var sF = dEl.currentStyle.filter;dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(GradientType=',  +(!!bRepeatY),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('');};}else{p_dCanvas = p_useCanvas = p_dCtx =  null;return function(dEl , sColor1 , sColor2  ){if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);if(!dEl) return false;with(dEl.style){ backgroundColor = sColor2; };//alert('your browser does not support gradient effet');}}})();</script>//調用方式：<script>setGradient('example1','#4ddbbe','#d449cc',1);setGradient(document.body, '#629be2','#333ebe',0);</script>