javascript - HTML UL 中的交替背景颜色

Question

我想在不使用 JQuery 的情况下替换 HTML 无序列表中的背景颜色。

Answer 1

最好的选择是 CSS3 :nth-child 选择器:

#myul li:nth-child(odd) {
    background-color: red;
}
#myul li:nth-child(even) {
    background-color: green;
}

或者如果出于某种原因您确实需要 javascript 解决方案:

<style>
    li.even { background-color: red; }
    li.odd { background-color: blue; }
</style>

var ul = document.getElementById('myul');
var items = ul.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
    var class = i % 2 == 0 ? 'even' : 'odd';
    items[i].className = class;
}

或者如前所述，您可以只在服务器端生成类。