如何将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？

回答

相关问题