js改变html的文字颜色,字体颜色渐变（当遇到需要js改变HTML内容时）(示例代码)...

我之前遇到过一个情况，字体颜色渐变的效果其中一种代码会影响到js重新赋值该div的的值重读或者混乱的情况：

style样式：

.normal{

background: -webkit-linear-gradient(top, #b5339d, #e8096f);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.button,.button2{

display: inline-block;border: 1px solid #999;color: #999;font-size: 12px;

padding: 2px;

}

body内容：

正常文档内容

点击改变内容

js代码：

$(".button").unbind("click").click(function(){

$(".normal").html("改变之后的内容")

})

这种情况可能会出现赋值混乱的情况。

另外还可以用另外一种css样式实现字体颜色渐变：

style样式：

.normal2{

position: relative;

height: 21px;

}

.normal2:after{

content: attr(text);

position: absolute;

top: 0;

left: 0;

z-index: 2;

color: #e8096f;

-webkit-mask: -webkit-gradient(

linear,

left top,

right top,

from(rgba(232,9,111,1)),

to(rgba(232,9,111,0.7)));

);

}

body内容：

点击改变内容2

js代码：

$(".button2").unbind("click").click(function(){

$(".normal2").html("改变之后的内容")

})

如果有伙伴们遇到赋值混乱的情况，建议选择第二种样式实现字体颜色渐变