我正在尝试根据我创建的 .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"
}
}
]
最佳答案
您可以使用 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);
}
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) <!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>关于javascript - 使用 Javascript 和 json 文件更改 div 的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47356945/