1
私が作成した.jsonファイルに基づいて動的に作成して色分けしようとしています。私は各個別のdivを作成することができましたが、ファイルから色を追加することはできませんが、私は色の名前を印刷することができましたが、各部門を変更することができます大変感謝します。Javascriptとjsonファイルを使用して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);
}
}
あなたはCSSでdiv要素の背景色を設定することができます
[
{
"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"
}
}
]
これは私のために働いたがありがとうございました。 – IvRen