Home > Developer > JavaScript
Previously, the Clip attribute was used to splice up and down two half different colors of text.
Colorful gradient words, compatible with all mainstream browsers.
Only the colorful () function is really useful in page JS:
Copy codeThe Code is as follows:
Function colorful (obj, font, r, g, B, type ){
Var boxObj;
If (typeof (obj) = "string" | typeof (obj) = "number "){
BoxObj = document. getElementById (obj );
} Else {
BoxObj = obj;
}
BoxObj. innerHTML = "<a href = '#'>" + font + "</a> ";
Var num = boxObj. getElementsByTagName ("a") [0]. scrollWidth;
BoxObj. innerHTML = "";
For (var I = 0; I <= num; I ++ ){
Var j = I + 1;
Var c = Math. round (255/num * I );
Switch (Number (type )){
Case 0: r = c; g = c; B = c; break;
Case 1: r = c; break;
Case 2: g = c; break;
Case 3: B = c; break;
}
Var iObj = document. createElement ("");
IObj. innerHTML = font;
IObj. style. clip = "rect (auto" + j + "px auto" + I + "px )";
IObj. style. color = "rgb (" + r + "," + g + "," + B + ")";
IObj. href = "#";
BoxObj. appendChild (iObj );
}
}
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> CLIP implements color gradient font </title> <style type =" text/css "> body {font: 12px/1.5 arial} h3 {padding: 10px; margin: 0; background-color: # c00; border: 1px dashed # fff; color: # fff; Font: 16px/1.5 arial ;}. box {position: relative; background-color: # fff; width: auto; margin: 0 auto; padding: 0 30px; font: 700 20px/1.5 "", arial; border: 1px dashed # f60; height: 30px; margin-top: 8px ;}. box a {position: absolute; font-style: normal; white-space: nowrap ;}. f999 {color: #999;} a: link {text-decoration: none;} a: hover {text-decoration: underline;} a: visited {text-decoration: none;} address {background-color: # f1f1 F1; border: 1px dashed # ddd; padding: 10px; font-style: normal; color: #999;} address a, address a: visited {color: # c00 ;} </style> </pead> <body> <strong> CSS colorful gradient words </strong> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td height = "10" colspan = "2" align = "center"> </td> </tr> <td width = "19%" height = "30" align = "right"> text: </td> <td width = "81%"> <input name = "text" type = "text" id = "ctext" s Ize = "30" maxlength = "16" value = "Enter the text you want to generate gradient here" onkeyup = "setDiv () "/> </td> </tr> <td height =" 30 "align =" right "> r value: </td> <select name = "rvalue" id = "rvalue"> </select> initialize the R value in the RGB color </td> </tr> <tr> <td height = "30" align = "right"> G value: </td> <select name = "gvalue" id = "gvalue"> </select> initialize the G value in the RGB color </td> </tr> <tr> <td height = "30" align = "right"> value B: </td> <select name = "bvalue" id = "bvalue"> </se Lect> initialize the B value in the RGB color </td> </tr> <td height = "30" align = "right"> gradient mode: </td> <select name = "ctype" id = "ctype"> <option value = "0"> grayscale gradient </option> <option value = "1 "selected =" selected "> variable R value </option> <option value =" 2 "> variable G value </option> <option value =" 3 "> change B value </option> </select> the value range is 0 to 0 ~ 255 variation </td> </tr> </table> <button onclick = "javascript: createData ()"> gradient coloring </button> Designed by Silence, reprint please indicate the source http://www.silentash.com /? Id = 109 </address> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Although IE has its own gradient filter, it is not supported by other browsers. Applications with the CLIP attribute can support all browsers! Through the program, we can easily add the CLIP attribute to each text copy to split a text section into pixels, color them separately, and combine them to achieve a colorful gradient!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
