我之前遇到过一个情况，字体颜色渐变的效果其中一种代码会影响到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内容：
<div class="normal">正常文档内容</div>
<div class="button">点击改变内容</div>
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内容：
<div class="normal2" text="正常文档内容2"></div>
<div class="button2">点击改变内容2</div>
js代码：
$(".button2").unbind("click").click(function(){
$(".normal2").html("改变之后的内容")
})
如果有伙伴们遇到赋值混乱的情况，建议选择第二种样式实现字体颜色渐变
字体颜色渐变（当遇到需要js改变HTML内容时）
原文地址：https://www.cnblogs.com/Andrea-Li/p/9025967.html