0

I am trying to learn Javascript and the DOM. I would like to use a for loop to create alternative background colours for my text.

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;

 }

Here is the fiddle: http://jsfiddle.net/tmyie/LMdXn/36/

Any help would be great :)

4

3 回答 3

1

尝试类似：

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

 }

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

这是一个工作小提琴

值得一提的是，在新的浏览器中你不需要 JavaScript 来做到这一点（CSS 就足够了）

这是 MDN 上关于数组的一个很好的教程

于 2013-06-21T01:28:30.580 回答
0

这是一种清晰而简单的方法来实现你想要的，没有额外不必要的功能混乱：

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. 为每个元素提供数组中的下一种颜色

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

如果所有段落都在同一个容器中，您可以在 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;
}
于 2013-06-21T01:51:23.480 回答
0

看看这个jsFiddle。

你有一些错误......主要是忘记了[i]as in p[i]，也是getElementsByTagName复数形式......我在 colors 数组中添加了更多值，所以它不会超出范围（你也可以使用%(mod) as in colors[i % colors.length]）

于 2013-06-21T01:28:26.787 回答