如何用js实现div的背景颜色渐变？求解答

这是薯稿我以前收藏的代码，利用CSS+JS实现渐变，代码如下：

<!doctype html public '-//w3c//dtd html 4.01//en' ''>

<html>

<head>

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 it

try{ 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 gradients

if(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>

<style>

body{font:0.75em/1.4 Arial;text-align:left;margin:20px;}

hr{clear:both;visibility:hidden;}

xmp{font:12px/12px Courier New;background:#fff;color:#666; border:solid 1px #ccc;}

div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 Tahoma;text-align:justify;}

</style>

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>