JavaScript 第二个循环不会改变 CSS

Question

我正在使用 GreaseMonkey 为特定网站的某些元素重新着色。但是，当使用下面的循环时，只有第一个循环会进行任何更改。更改循环的顺序将只允许第一个循环生效。

var i;
var evenRows = document.getElementsByClassName("even");
for (i=0;i<=evenRows.length;i++) { evenRows[i].style.backgroundColor = '#555'; }

var oddRows = document.getElementsByClassName("odd");
for (i=0;i<=oddRows.length;i++) { oddRows[i].style.backgroundColor = '#333'; }

var theLinks = document.getElementsByTagName("a");    
for (i=0;i<=theLinks.length;i++)  { theLinks[i].style.color = '#aaa'; }

Answer 1

问题出在你的循环逻辑上，它会抛出一个 JS 错误。该数组是 0 索引的，但是 length属性为 1 索引。在你的循环中，你正在检查你的计数器是否小于或等于数组的长度，这意味着当 i 时循环仍将运行。等于 evenRows.length .您无法访问 evenRows[evenRows.length]因为它不存在。

更改 i <= evenRows.length;至 i < evenRows.length;这很好用。

JS fiddle :http://jsfiddle.net/grammar/vdwxua7s/1/