Question

我正在尝试根据我创建的.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>

js文件

var ColorContainer = document.getElementById('ColorArea');

var NewRequest = new XMLHttpRequest();
NewRequest.open('GET', 'colors.json', true);

NewRequest.onload = function()
{
    var ColorData = JSON.parse(NewRequest.responseText);
    renderHTML(ColorData);
};
NewRequest.send();

/* Function used to render the Color Data */
function renderHTML(data){
 var ColorInfo = " ";
 var Colordiv 

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

}

json文件

[
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,255,1],
        "hex": "#000"
      }
    },
    {
      "color": "white",
      "category": "value",
      "code": {
        "rgba": [0,0,0,1],
        "hex": "#FFF"
      }
    },
    {
      "color": "red",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,0,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "blue",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [0,0,255,1],
        "hex": "#00F"
      }
    },
    {
      "color": "yellow",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "green",
      "category": "hue",
      "type": "secondary",
      "code": {
        "rgba": [0,255,0,1],
        "hex": "#0F0"
      }
    }
  ]

Answer 1

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

Select

for循环变为

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

＆＃13;

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

＆＃13;

var ColorContainer = document.getElementById('ColorArea');

var ColorData = [
    {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,255,1],
        "hex": "#000"
      }
    },
    {
      "color": "white",
      "category": "value",
      "code": {
        "rgba": [0,0,0,1],
        "hex": "#FFF"
      }
    },
    {
      "color": "red",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,0,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "blue",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [0,0,255,1],
        "hex": "#00F"
      }
    },
    {
      "color": "yellow",
      "category": "hue",
      "type": "primary",
      "code": {
        "rgba": [255,255,0,1],
        "hex": "#FF0"
      }
    },
    {
      "color": "green",
      "category": "hue",
      "type": "secondary",
      "code": {
        "rgba": [0,255,0,1],
        "hex": "#0F0"
      }
    }
  ]

/* Function used to render the Color Data */
function renderHTML(data){
 var ColorInfo = " ";
 var Colordiv 

 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);
    }

}

renderHTML(ColorData)

＆＃13;

Answer 2

您实际上只缺少对div的样式属性的赋值，您可以使用element.style.cssPropertyInCamelCase访问该属性。您可以通过这种方式访问任何内联CSS声明，只需将属性名称从 kebab-case 转换为JavaScript中的 camelCase 即可。

由于您的颜色JSON将被解析为数组，您还可以将循环简化为forEach调用：

var colors = [{
    "color": "black",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255, 255, 255, 1],
      "hex": "#000"
    }
  },
  {
    "color": "white",
    "category": "value",
    "code": {
      "rgba": [0, 0, 0, 1],
      "hex": "#FFF"
    }
  },
  {
    "color": "red",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255, 0, 0, 1],
      "hex": "#F00"
    }
  },
  {
    "color": "blue",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [0, 0, 255, 1],
      "hex": "#00F"
    }
  },
  {
    "color": "yellow",
    "category": "hue",
    "type": "primary",
    "code": {
      "rgba": [255, 255, 0, 1],
      "hex": "#FF0"
    }
  },
  {
    "color": "green",
    "category": "hue",
    "type": "secondary",
    "code": {
      "rgba": [0, 255, 0, 1],
      "hex": "#0F0"
    }
  }
]

colors.forEach(function(color) {
  var colorDiv = document.createElement('div');
  colorDiv.textContent = color.color + ' ' + color.code.hex;
  colorDiv.style.backgroundColor = color.code.hex;
  document.getElementById('ColorArea').appendChild(colorDiv);
});

#ColorArea {
  color: #ccc;
}

<div id="ColorArea">
</div>

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

2 个答案: