Cara menggunakan JavaScript dan CSS untuk menukar warna teks antara kemahiran lines_javascript

Mari kita lihat kaedah mudah dahulu.
Tentukan dua gaya dalam css .ganjil{...} dan .genap{...} masing-masing untuk warna latar belakang yang berbeza bagi baris bernombor ganjil dan baris bernombor genap. Selepas halaman web dimuatkan, gunakan javascript untuk mendapatkan senarai tag yang akan ditukar dan laksanakan kod berikut:

// 当文件加载时，执行代码。
window.onload = function() {
 // 获取<ul id="list" />对象
 var list = document.getElementById('list');
 // 获取list下面的所有li
 var items = list.getElementsByTagName('li');
 // 遍历items
 for (var i = 0; i < items.length; i++) {
  var className = (i % 2 == 0) &#63; ' odd' : ' even';
  items[i].className += className; 
 }
}

Melaksanakan warna yang berbeza untuk baris yang berbeza, supaya perubahan diproses sepenuhnya pada bahagian hadapan dan tidak akan dikelirukan dengan logik bahagian belakang, yang merupakan penyelesaian yang lebih baik.
Kemudian kesan pelaksanaan kod ini pada asasnya adalah seperti berikut:

Walau bagaimanapun, terdapat beberapa masalah dengan pendekatan ini:

• Hanya satu senarai tertentu boleh diberikan dan tidak boleh digunakan semula
• Anda tidak boleh menentukan kedudukan permulaan perubahan warna Semasa memproses perubahan warna jadual, anda perlu menulis pemprosesan khas
• Kod semuanya dalam acara onload, dan pergantungan pada halaman terlalu tinggi

Tingkatkan kod dan alihkannya ke fungsi berasingan:

/**
 * 此方法用于列表的隔行变色效果，可以灵活得为指定ID的列表指定隔行的颜色。
 *
 * @param id 列表的id
 * @param item 要变色的行的标签
 * @param odd 奇数行的样式类名，如果不指定，则默认为odd
 * @param even 偶数行的样式类名，如果不指定，则默认为even
 * @param start 开始变色的行的索引，如果不指定，则默认为0
 * @param end 结束变色的行的索引，如果不指定，则默认为列表长度
 */
function rowRender(id, item, odd, even, start, end) {
 // 获取列表容器
 var list = document.getElementById(id);
 // 获取列表
 var items = list.getElementsByTagName(item);
 
 // 修正初始位置，如果不是一个数字或者越界，则从0开始
 if (isNaN(start) || (start < 0 || start >= items.length)) {
  start = 0;
 }
 
 // 修正结束位置，如果不是一个数字或者越界，则为列表末尾
 if (isNaN(end) || (end < start || end >= items.length)) {
  end = items.length;
 }
 
 // 如果没有指定odd，则默认为'odd'
 odd = odd || 'odd';
 // 如果没有指定even, 则默认为'even'
 even = even || 'even'; 
 
 // 遍历列表并渲染效果
 for (var i = start; i < end; i++) {
  var className = ' ' + ((i % 2 == 0) &#63; odd : even);
  items[i].className += className;
 }
}

Penggunaan:

window.onload = function() {
 // 渲梁list1下所有的li标签，使用默认的样式和起始位置
 rowRender('list1', 'li');

 // 渲梁list2下所有的li标签，使用指定的odd和默认的even，使用指定的起始位置
 rowRender('list2', 'li', 'odd1', null, 2, 6);

 // 渲梁table1下所有的tr标签，使用指定的odd和even，使用默认的起始位置
 rowRender('table1', 'tr', 'tr-odd', 'tr-even');
 // 渲梁table2下所有的tr标签，使用指定的odd和even，使用指定的起始位置
 rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);
}

Contoh:
Jadual 1

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

Jadual 2

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