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

Question

我正在尝试基于对象列表创建颜色列表。 我的问题是如何动态设置基于data.corporate.colour.hex创建的每个li的background-color 。 我尝试了几件事但没有成功。 我该如何实现？

先感谢您。

密码笔

 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); 

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

Answer 1

像这样：

"<li class='colour' style='color:#" + data.corporate[i].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 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); 

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

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

这是您想要达到的目标吗？

我style='background-color: #"+ data.corporate[i].colour.hex + "'为您的组件添加了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允许您随时访问html元素的style属性。