Question

我正在尝试根据对象列表创建颜色列表。我的问题是如何动态设置基于background-color创建的每个li的{{1}}。我尝试了一些没有成功的事情。我怎样才能做到这一点？

提前谢谢。

data.corporate.colour.hex

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}

console.log(output);

$("#placeholder").html(output);

Answer 1

像这样：

"<li class='colour' style='color:#" + data.corporate[i].colour.hex + "'>"

＆＃13;

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li class='colour' style='color:#" + data.corporate[i].colour.hex + "'>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}
$("#placeholder").html(output);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="placeholder"></ul>

＆＃13;

Answer 2

尝试以下代码段

var data = {
  corporate: [{
      name: "blue",
      colour: {
        rgb: "RGB 0, 25, 168",
        hex: "0019A8"
      }
    },
    {
      name: "red",
      colour: {
        rgb: "RGB 145, 25, 168",
        hex: "00eeA8"
      }
    }
  ]
};

var output = [];

for (var i in data.corporate) {
  output.push("<li style='background-color:#" + data.corporate[i].colour.hex +"'>" +
    data.corporate[i].name + " " +
    data.corporate[i].colour.rgb + "--" +
    data.corporate[i].colour.hex + "</li>");
}

console.log(output);

$("#placeholder").html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="placeholder"> </ul>

Answer 3

this你试图实现的目标是什么？

我添加了 style='background-color: #"+ data.corporate[i].colour.hex + "' 到您的组件

Answer 4

您可以通过动态生成html元素来遵循您已经使用的逻辑，并且在您访问创建的<li>之后，您可以在相同的任何位置循环它们，我假设.js文件是这样的。

var lis = Array.prototype.slice.call(document.getElementById('placeholder').childNodes); 

lis.forEach(function(li) {
   li.style.color = // whatever
   li.style['background-color'] = // whatever
});

这样您就可以根据需要将颜色设置为您想要的颜色（例如，如果您需要或根据事件更新颜色，则创建动画和交替颜色），因为javascript允许您访问style属性每当你想要一个html元素。

如何使用JavaScript将CSS属性应用于动态生成的HTML？

4 个答案: