如何使用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屬性。