在Javascript中更改奇数组元素的颜色

时间:2013-11-16 13:58:14

标签: javascript arrays

假设我在COLOR中有一个5个字母的字符串,并且希望C L和R是蓝色或任何颜色与偶数字母O和O不同。我尝试将其转换为数组然后用于循环。但不知道如何为数组元素指定颜色值。这是我到目前为止的代码。

<script type="text/javascript"><!-- Hide JavaScript

var mystring='color';

var myArray = mystring.split('');

for(i=0; i < myArray.length; i++){

//checking for odd positions
if(i % 2 == 0){
mojArray[i]//how to add color code to each element?
}
else{
mojArray[i];
}
document.write(myArray[i]);
}
-->
</script>

3 个答案:

答案 0 :(得分:0)

数组值/字符串不能包含颜色值。可以具有颜色属性的元素是HTML元素。不确定mojArray是什么,但是如果它包含HTML / DOM元素,你可以做类似mojArray[i].style.color = '#ff0000';的事情(这是红色的十六进制代码,但有效的CSS颜色符号可以工作)。

你在识别偶数/奇数元素方面做得很好,你只需要弄清楚(并在问题中更好地解释)你想要画什么。

这应该让你开始。

答案 1 :(得分:0)

我建议如下:

function colorOdd (el, color) {
    // split the string, removing any leading white-space:
    var str = el.firstChild.nodeValue.replace(/^\s+|\s+$/g,'').split('');

    // iterate over the split characters in the string:
    for (var i = 0, len = str.length; i < len; i++){
        // if the iterator is an odd number, wrap the string in a span (and style)
        str[i] = i%2 === 0 ? '<span style="color: ' + color + ';">' + str[i] + '</span>' : str[i];
    }
    /* join the string back together (with empty-space) and set the innerHTML
       of the element upon which the function was called:
    */
    el.innerHTML = str.join('');
}

colorOdd(document.getElementById('demo'),'#f90');

JS Fiddle demo

答案 2 :(得分:0)

var mystring='color';
for(var i=0;i<mystring.length;i++)
{
  var ch = mystring.charAt(i);
  if(i%2==0)
  {
     ducument.getElementById("mydiv").innerHTML += "<span style='color:red'>"+ch+"</span>"
  }
  else
  {
     ducument.getElementById("mydiv").innerHTML += "<span style='color:blue'>"+ch+"</span>"
  }
}


<div id="mydiv"> </div>