Question

有没有办法用javascript重复两种颜色之一。例如我在3个不同的框中有一些文字。

文字1
文字2
文字3

现在我希望1和3为红色，第二个为黑色..现在每次添加一些新行，颜色要改变，如果我添加文本4 - 是 - 黑色，然后是文本5 - 红色。

有没有办法只用js做到这一点？

Answer 1

你可以使用jQuery的odd selector或even selector从0开始这样做：

特别注意0基础索引意味着，反直觉地说：奇数选择了第二个元素，第四个元素，等等在匹配的集合中。

假设你有这些li元素：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

以及以下css：

.red{
    color: red;
}

.green{
    color: green;
}

如果您使用jQuery并执行此操作，请获取元素并为奇数或偶数附加适当颜色方案的类名：

console.log($('li:odd'));  //[<li>2</li>, <li>4</li>] you'll get these elements
console.log($('li:even')); //[<li>1</li>,<li>3</li>,<li>5</li>] you'll get these
$('li:odd').addClass(' red'); // turn color to red
$('li:even').addClass(' green'); //turn color to green

或常规JavaScript：

var myLi = document.getElementsByTagName('li');

for(var i=0; i<myLi.length; i++){
    if(i%2 == 0)
        myLi[i].className += ' red';
    else
        myLi[i].className += ' green';
}

Answer 2

您可以使用jQuery来做到这一点，但如果您是初学者，最好先学习一些香草JS。

function isOdd(num) {
    return num % 2;
}

var para = document.getElementById('container').getElementsByTagName('p');

for (var i = 0; i < para.length; i++) {
    // for readability
    para[i].style.color = 'white';

    if (isOdd(i)) {
        para[i].style.backgroundColor = 'red';
    } else {
        para[i].style.backgroundColor = 'black';
    }
}

http://jsfiddle.net/Nyuszika7H/8h7RZ/1/embedded/result%2Cjs%2Chtml/

Answer 3

<ul id="mylist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<script type="text/javascript">
  liArray=document.getElementById('mylist');
  for(l=0;l<liArray.length;l++){
    if(l%2==1){
      liArray[l].style.color='#ff0000';
    }
  }
</script>

javascript两种颜色重复效果

3 个答案: