Ask and Learn

隔行变色(JS+CSS)

目录

隔行变色(JS+CSS)

在 css 中定义两种样式 .odd{...}.even{...} 分别用于奇数行和偶数行的不同背景颜色。在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码

// 当文件加载时,执行代码。
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) ? ' odd' : ' even';
        items[i].className += className; 
    }
}

实现不同行的不同颜色,这样变完全在前端处理,不会与后端的逻辑混淆,是一种比较好的解决方案。

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • css html javascript