如何將CSS屬性應用於使用JavaScript的動態生成HTML？

-1

我想創建一個基於對象列表的顏色列表。我的問題是如何動態設置根據data.corporate.colour.hex創建的每個li的background-color。我嘗試了一些沒有成功的事情。我怎樣才能做到這一點？如何將CSS屬性應用於使用JavaScript的動態生成HTML？

預先感謝您。

CodePen

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>

來源

2017-06-15 Diego Oriani

「style ='background-color：＃」+ data.corporate [i] .hex +「' –

https://stackoverflow.com/questions/2173229/how-do-i-write-a-rgb-color -value-in-javascript – warl0ck

你可以添加類到它：https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element – tech2017

像這樣：

"<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>

來源

2017-06-15 13:54:28

謝謝你的幫助！ –

歡迎您:) –

嘗試下面的代碼片段

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>

來源

2017-06-15 13:57:01

太晚了.......... – mplungjan

謝謝你的幫助！ –

是this你想達到什麼樣的？

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

來源

2017-06-15 13:58:28 F1ks3r

你可以按照您正在使用已經通過動態生成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元素，只要你想要。

來源

2017-06-15 14:08:05

謝謝你，我一定會在將來使用它。 –

如何將CSS屬性應用於使用JavaScript的動態生成HTML？

回答

相關問題