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

Posted 2023-03-05

【中文标题】如何通过 div.innerHTML 从 JSON 输入中动态设置数据样式？

【英文标题】：How to dynamically style data from a JSON input via div.innerHTML?

【发布时间】：2021-09-11 12:00:56

【问题描述】：

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

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

JS 代码（跳过 fetch 代码可以正常工作）：

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 来做到这一点？我已经尝试过四处搜索，但要找到合适的答案非常困难。

【问题讨论】：

将其包装成span 或其他东西，并根据您的评分值向该元素添加一个类。然后在样式表中编写规则，为这些类应用不同的所需样式。

对于未来，请使用[<>] stack sn-p 并将对象和 JS 发布到 minimal reproducible example - 这里提取可能有效，因此根本不需要发布该部分

是的，很抱歉，以后会这样做。感谢您的提醒。

暂时修改

【参考方案1】：

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

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

希望我有所帮助。

【讨论】：

尽量避免使用基于 JS 的 CSS 样式，这样会限制自己重复使用代码，而且随着您的逻辑传播得越广，将来的编辑将越难操作。

【参考方案2】：

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

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

【参考方案3】：

在 for 循环中，进行条件检查以添加首选文本颜色，

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

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

如果仅将评分部分设为颜色，则可以创建 p 和多个跨度。然后根据喜好设置每个样式。 IE。

【讨论】：

这是什么语言？看起来像伪代码