javascript渐变,HTML5渐变

怎么用js设置一个渐变色的背景颜色

其实渐变的实现归根结底都是css（样式）来控制，所以我目前想到的有2种：

所有代码直接在JS里面写：

var test = document.getelementById(''test);

test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';

PS:这儿的backgroundImage的‘i’一定要大写，并且一定要这么写，不能写成和长沙市里面的background-image一样，JS不识别的。

2.在css里面写好之后，通过js给element添加class来新增样式：

在样式表定义好样式     

css：

.jianbian{

background-image: linear-gradient(120deg, #155799, #159957);

} 

然后通过js给元素添加class

js:

var test = document.getelementById(''test);

test.className = 'jianbian' ;

大概就这样了，不过你还需要考虑一下不同浏览器的兼容性，关于渐变的写法。

-webket-/-moz-之类的

相关问答

Q1: javascript 如何实现div 颜色的渐变？？

动态渐变

span style="font-size:12px;"html

...

body

center

div id="fade" style="width:600px;height:200px;"/div

/center

/body

/html/span

为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果

span style="font-size:12px;"script type="text/javascript"

var node=document.getElementById("fade");

var color="#0000";

var level=1;

window.load=function fading(){

node.style.background=color.+level.toString()+level.toString();

level++;

if(level16){

clearTimeOut(fading);

}else{

setTimeOut(fading,300);

}

}

script/span

静态渐变

在css样式中添加：

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));

简单解释下：

linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；

后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色

from：这就是开始的颜色了

to：和from是同时出现的，最后渐变结束的颜色

而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；

附送下简单的其他的基本代码

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/

background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/

Q2: javascript实现渐变效果。。。

!DOCTYPE html

html

  head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

title

RunJS 演示代码

/title

style

body {

margin:auto;

}

div {

border: 1px solid black;

width:100px;

float:left;

height:100px;

text-align:center;

line-height:100px;

}

div#div1 {

cursor:pointer;

background-color:#fd3;

}

/style

script

onload = function(){

var w1 = parseFloat(div1.style.width) || div1.offsetWidth;

var w3 = parseFloat(div3.style.width) || div3.offsetWidth;

var anonymous = function(div, asc){

var me = div;

clearInterval(me.interval);

me.interval = setInterval (function(){

var w = parseFloat(me.style.width) || me.offsetWidth;

asc ? w  w1 + w3 ? w++ : clearInterval(me.interval) : w  w1 ? w-- : clearInterval(me.interval);

me.style.width = w+"px";

div3.style.width = w1 + w3 - w + "px";

}, 10); 

};

div1.onmouseover = function(){

anonymous (this, 1);

};

div1.onmouseout = function(){

anonymous (this, 0);

};

}

/script

  /head

body

div id="div1"

1

/div

div

2

/div

div id="div3"

3

/div

  /body

/html

Q3: javascript 实现“渐变”或“渐隐渐现”的原理是什么?

。。。---------------------由于知道的太少，，，所以认为javascript 实现“渐变” 或者 “渐隐渐现” 的效果是不可能的。---------------------今天看了一别人网站上的js代码，发现其“渐变” 或者 “渐隐渐现” 的效果 完全是靠 javascript 实现的。。。。。自己很是惊叹！！---------------------------我想仔细研究一下来着，，但是他们的代码实在是太乱了，，找不着重点，，，不想看。。-------------------------所以，请您教教我：------------------------用javascript 实现“渐变” 或者 “渐隐渐现” 的效果 的原理是什么？------------------------只说说原理和用到的几个最关键的函数或属性就可以了。其余我自己百度。---------------------当然越详细越好，最好给出一个非常单纯的例子，，，让我一下就可以领悟其精髓。。---------------------谢谢！！！！