如何通过div.innerHTML从JSON输入中动态设置数据样式

Question

我目前正在使用JS从JSON文件中获取数据，并在其中循环以在网站上显示，并将其附加到html文件中的div，即

<div id = "groceries"></div>

JS代码(跳过提取代码，效果良好(：

function appendData (data) {
const mainContainer = document.getElementById ('groceries');
for (let i = 0; i < data.length; i++) {
const div = document.createElement ('div');
div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
mainContainer.appendChild (div);
}
}

"评级"数据需要根据评级设置样式，即绿色表示"低"，琥珀色表示"中"，红色表示"高"。。。基于JSON文件中的内容。

我不知道如何使用纯JS/html/css来实现这一点？我试着四处寻找，但很难找到合适的答案。

Answer 1

根据评级值添加一个类。阿卡

function appendData(data) {
const mainContainer = document.getElementById ('groceries');
for (let i = 0; i < data.length; i++) {
const div = document.createElement ('div');
div.classList.add('rating', 'rating--' + (data.rating < 3 ? 'low' : data.rating > 6 ? 'high' : 'med'));
div.innerHTML = '<b>' + data[i].item + '</b> x' + data[i].quantity + ' ' + data[i].calories + '<b> - ' + data[i].rating + '<br><br>';
mainContainer.appendChild (div);
}
}

然后在CSS中，你可以简单地进行

.rating {
// Generic styling
}
.rating.rating--low {
color: #FF0000;
// Unique Styles
}
.rating.rating--med {
color: #FFFF00;
// Unique Styles
}
.rating.rating--high {
color: #00FF00;
// Unique Styles
}

Answer 2

我不知道我是否做对了，但您可以将简单的if语句与预构建的HTMLDOM样式对象一起使用。

if(data[i].quantity > average){
div.style.color = "red"
}else if(data[i].quantity < average){
div.style.color = "green"
}

希望我能帮上忙。

Answer 3

在循环内部，进行条件检查以添加首选的文本颜色

If (data[i].rating === "High") 
{div.style.color = "red"}
// and so on other conditions checked.
If (???) {...}

这个例子将使div中的所有文本都变成红色

如果只有评级部分是彩色的，可以创建p和多个跨度。然后根据自己的喜好对每一个进行造型。即。<p风格>lt；跨度样式>lt；跨度样式>lt；跨度样式>