Javascript 尝试更改动态创建的 html 列表中的文本颜色

Question

我正在尝试更改列表中项目的文本颜色。 PHP读取数据库获得两个数组，并将其转换为JavaScript数组。一个数组包含要在列表上显示的文本，另一个数组包含文本颜色的信息。

我可以毫无问题地设置背景颜色，但我不想这样做，而是想设置文本颜色。

这是我的 JavaScript 代码；有人可以告诉我我在这里做错了什么吗？

<script type="text/javascript">
  function lodlist() {
    var Msgarray = <? php echo json_encode($Msgarray); ?> ;
    var Clrarray = <? php echo json_encode($Clrarray); ?> ;

    var div = document.getElementById('scroll');
    ul = document.createElement('ul');

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

      var li = document.createElement('li'),
        content = document.createTextNode(Msgarray[i]);

      li.appendChild(content);

      if (Clrarray[i] == "1" || Clrarray[i] == "2" || Clrarray[i] == "3") {
        // li.style.backgroundColor = 'green';  // this works but I do not need it

        li.style.clolor = "green"; // i want this but does not work

      } else
      if (Clrarray[i] == "6" || Clrarray[i] == "7" || Clrarray[i] == "8" || Clrarray[i] == "8") {
        // li.style.backgroundColor = "red";     // this works but I do not need it
        li.style.clolor = "red";

      } else
      if (Clrarray[i] == "5" || Clrarray[i] == "6") {
        // li.style.backgroundColor = "yellow";// this works but I do not need it
        li.style.clolor = "yellow";

      }

      ul.appendChild(li);

    }
    div.appendChild(ul);

  }
  onload = function() {
    lodlist()
  }
</script>

Answer 1

只需将颜色更改为颜色即可。这是完整的代码

<script type="text/javascript">
 function lodlist() {
var Msgarray = <?php echo json_encode($Msgarray); ?> ;
var Clrarray = <?php echo json_encode($Clrarray); ?> ;

var div = document.getElementById('scroll');
ul = document.createElement('ul');

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

  var li = document.createElement('li'),
    content = document.createTextNode(Msgarray[i]);

  li.appendChild(content);

  if (Clrarray[i] == "1" || Clrarray[i] == "2" || Clrarray[i] == "3") {
    // li.style.backgroundColor = 'green';  // this works but I do not need it

    li.style.color = "green"; // i want this but does not work

  } else
  if (Clrarray[i] == "6" || Clrarray[i] == "7" || Clrarray[i] == "8" || Clrarray[i] == "8") {
    // li.style.backgroundColor = "red";     // this works but I do not need it
    li.style.color = "red";

  } else
  if (Clrarray[i] == "5" || Clrarray[i] == "6") {
    // li.style.backgroundColor = "yellow";// this works but I do not need it
    li.style.color = "yellow";

  }

  ul.appendChild(li);

  }
   div.appendChild(ul);

 }
 onload = function() {
  lodlist()
  }
 </script>