Font Color gradient (when you encounter the need to change the HTML content JS)

I've encountered a situation before, the effect of font color gradient one of the code will affect the value of the DIV re-assignment of the values of a "accented" or "chaotic" situation:

Style styles:

. 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 content:

<div class= "Normal" > Normal document Content </div>
<div class= "button" > Click to change Content </div>

JS Code:

$ (". Button"). Unbind ("click"). Click (function () {
$ (". Normal"). HTML ("changed content")
})

This situation may occur when the assignment is confusing.

You can also use a different CSS style for font color gradients:

Style styles:

. 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 content:

<div class= "Normal2" text= "Normal document content 2" ></div>
<div class= "Button2" > Click to change Content 2</div>

JS Code:

$ (". Button2"). Unbind ("click"). Click (function () {
$ (". Normal2"). HTML ("changed content")
})

If a partner encounters assignment confusion, it is recommended to choose the second style to implement the font color gradient

Font Color gradient (when you encounter the need to change the HTML content JS)