使用Javascript和json文件更改div的背景色_Javascript_Json

使用Javascript和json文件更改div的背景色

javascript json

使用Javascript和json文件更改div的背景色,javascript,json,Javascript,Json,我正在尝试根据我创建的.json文件动态创建和着色div。我已经能够创建每个单独的div，但从文件中添加颜色似乎是我无法做到的，我已经能够打印出颜色名称，但能够更改每个div是给我的任何帮助将不胜感激我的代码如下 index.html <!DOCTYPE html> <meta charset="utf-8"> <head> <meta name="viewport" content="width=device-width, initial-s

我正在尝试根据我创建的.json文件动态创建和着色div。我已经能够创建每个单独的div，但从文件中添加颜色似乎是我无法做到的，我已经能够打印出颜色名称，但能够更改每个div是给我的任何帮助将不胜感激

我的代码如下

index.html

 <!DOCTYPE html>
<meta charset="utf-8">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" type="css/text" href="">
   <title>Json and Ajax</title>
</head>
<style>

    h1
    {
        margin-bottom: 60px;
    }

    .boxvalue
    {
        width:150px;
        height: 150px;
        border: 2px solid rgb(199, 91, 91);
        display: inline-block;
        margin: 20px;
    }

    .Colorname
    {
        font-size: 18px;
        font-weight: 600;
        margin: 20px;
        display: inline-block;
        text-align: center;
    }
</style>
<body>
<div class="container-fluid">
    <header>
      <h1>Colors</h1>
    </header>
   <div id="ColorArea">

   </div>
</div>
    <script src="colorequest.js"></script>
 </body>

您可以使用CSS设置div的背景色：

Colordiv.style.backgroundColor = data[i].code.hex;

for循环变为

for (i = 0; i<data.length; i++) {
  ColorInfo += data[i].code.hex + " " + data[i].color + "<br>";
  Colordiv = document.createElement('div');
  Colordiv.classList.add('boxvalue');
  Colordiv.style.backgroundColor = data[i].code.hex;
  ColorContainer.appendChild(Colordiv);
}

for（i=0；i您实际上只缺少对divs的style属性的赋值，您可以使用element.style.cssprropertyincamelcase
访问该属性。您可以通过这种方式访问任何内联CSS声明，只需在JavaScript中将属性名称从kebab case转换为camelCase即可
由于您的JSON将被解析为数组，您还可以将循环简化为forEach调用：

var颜色=[{
“颜色”：“黑色”，
“类别”：“色调”，
“类型”：“主要”，
“代码”：{
“rgba”：[255，255，255，1]，
“十六进制”：“#000”
}
},
{
“颜色”：“白色”，
“类别”：“价值”，
“代码”：{
“rgba”：[0,0,0,1]，
“十六进制”：“FFF”
}
},
{
“颜色”：“红色”，
“类别”：“色调”，
“类型”：“主要”，
“代码”：{
“rgba”：[255,0,0,1]，
“十六进制”：“F00”
}
},
{
“颜色”：“蓝色”，
“类别”：“色调”，
“类型”：“主要”，
“代码”：{
“rgba”：[0,0,255,1]，
“十六进制”：“#00F”
}
},
{
“颜色”：“黄色”，
“类别”：“色调”，
“类型”：“主要”，
“代码”：{
“rgba”：[255,255,0,1]，
“十六进制”：“FF0”
}
},
{
“颜色”：“绿色”，
“类别”：“色调”，
“类型”：“次要”，
“代码”：{
“rgba”：[0,255,0,1]，
“十六进制”：“0F0”
}
}
]
颜色。forEach（函数（颜色）{
var colorDiv=document.createElement（'div'）；
colorDiv.textContent=color.color+''+color.code.hex；
colorDiv.style.backgroundColor=color.code.hex；
document.getElementById（'ColorArea'）.appendChild（colorDiv）；
})；
#色域{
颜色：#ccc；
}


Colordiv.style.backgroundColor = data[i].code.hex;

for (i = 0; i<data.length; i++) {
  ColorInfo += data[i].code.hex + " " + data[i].color + "<br>";
  Colordiv = document.createElement('div');
  Colordiv.classList.add('boxvalue');
  Colordiv.style.backgroundColor = data[i].code.hex;
  ColorContainer.appendChild(Colordiv);
}