How to use JavaScript and CSS to change the color of text lines _ javascript tips-js tutorial

This article mainly introduces how to use JavaScript and CSS to implement text color replacement. Of course, the most common method can also be implemented simply with CSS. If you need it, you can refer to the following simple method.
Define two styles in css. odd {...} And. even {...} for different background colors of odd and even rows, respectively. After the webpage is loaded, use javascript to obtain the list of tags to be discolored and execute the following code:

// Execute the code when the file is loaded. Window. onload = function () {// get
 
 
Object var list = document. getElementById ('LIST'); // obtain all li var items = list under the list. getElementsByTagName ('lil'); // traverse items for (var I = 0; I <items. length; I ++) {var className = (I % 2 = 0 )? 'Odd': 'even'; items [I]. className + = className ;}}

It is a good solution to achieve different colors of different rows, which is completely processed at the front end and will not be confused with the backend logic.
The implementation result of this Code is basically as follows:

However, this method has some problems:

• Only the specified list can be rendered and cannot be reused.
• You cannot specify the starting position of the color change. when processing the table color change, you must write it specially.
• The code is all in the onload event, and the page dependency is too high.

Improve the code and move it into a separate function:

/*** This method is used to change the color of rows in the list. You can specify the color of rows for the list with the specified ID. ** @ Param id list id * @ param item the label of the row to be discolored * @ param odd the Style Class Name of the odd row. If this parameter is not specified, the default value is the Style Class Name of the row with an even number of odd * @ param even. If this parameter is not specified, the default value is the index of the row with the color changing starting from even * @ param start. If this parameter is not specified, the default value is 0 * @ param end. If this parameter is not specified, the default value is the list length */function rowRender (id, item, odd, even, start, end) {// obtain the list container var list = document. getElementById (id); // obtain the list var items = list. getElementsByTagName (item); // modify the initial position. if it is not a number or is out of range, if (isNaN (start) | (Start <0 | start> = items. length) {start = 0;} // modify the end position. if it is not a number or out of bounds, if (isNaN (end) at the end of the list) | (end <start | end> = items. length) {end = items. length;} // if no odd is specified, the default value is 'odd' odd = odd | 'odd'; // if no even is specified, the default value is 'even' even = even | 'even'; // traverse the list and render the effect for (var I = start; I <end; I ++) {var className = ''+ (I % 2 = 0 )? Odd: even); items [I]. className + = className ;}}

Usage:

Window. onload = function () {// All li tags under the list1 beam, using the default style and starting position rowRender ('list1', 'lil '); // all the li tags under the list2 beam, use the specified odd and default even, and use the specified starting position rowRender ('list2', 'lil', 'oddd1 ', null, 2, 6); // All tr tags under the beam table1, using the specified odd and even, using the default starting position rowRender ('table1', 'tr ', 'tr-odd', 'tr-even'); // All tr tags under beam table2, using the specified odd and even, use the specified starting position rowRender ('table2', 'tr', 'tr-odd', 'tr-even', 1 );}

Example:
Table 1

rowRender('table1', 'tr', 'tr-odd', 'tr-even');

Table 2

rowRender('table1', 'tr', 'tr-odd', 'tr-even', 1);