循环遍历背景颜色（for循环）

Question

我正在尝试学习 Javascript 和 DOM。我想使用 for 循环为我的文本创建替代背景颜色。

HTML：

<p> one </p>
<p> two </p>
<p> three </p>
<p> four </p>
<p> five </p>

Javascript：

var p = document.getElementByTagName(p);
var colors = ["red","green"];

 for(var i=0 ; i < p.length; i++) {
     p.style.background = colors;

 }

这里是小提琴：http://jsfiddle.net/tmyie/LMdXn/36/

任何帮助都会很棒:)

Answer 1

尝试类似：

for(var i=0 ; i < p.length; i++) {
     p[i].style.background = colors[i%2];

 }

i%2 表示余数或i（循环变量）除以 2。您所做的是告诉它查看交替的位置。

Here is a working fiddle

值得一提，在新浏览器中you don't need JavaScript to do this (CSS is enough)

Here is a nice tutorial on arrays on MDN

Answer 2

看看这个jsFiddle。

您有一些错误...主要是忘记了[i] 中的p[i]，还有复数形式的getElementsByTagName。我为颜色数组添加了更多值，因此它不会超出范围（您可以也使用% (mod)，如colors[i % colors.length])

Answer 3

这里有一个清晰而简单的方法来实现你想要的，没有多余的不必要的功能混乱：

var paragraphs = document.getElementsByTagName("p");
var colors = ["#FF0000", "#00FF00", "#0000FF"];
for(var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = colors[i % colors.length];
}

它所做的只是：

1. 获取页面上的应用<p>元素数组
2. 创建所有颜色的数组（在本例中为红色、绿色和蓝色）
3. 为数组中的每个元素赋予下一种颜色

它还确保它不会返回带有i % colors.length 部分的undefined 颜色，这是您应该始终考虑的事情。

如果所有段落都在同一个容器中，您可以在 CSS 中这样做：

#container p:nth-child(3n+1)
{
    background-color: #F00;
}
#container p:nth-child(3n+2)
{
    background-color: #0F0;
}
#container p:nth-child(3n+3)
{
    background-color: #00F;
}