如何更改使用javascript创建的元素的颜色

我正在尝试更改使用JavaScript创建的元素的颜色。此元素中的信息由数据库中的数据填充

var done = orders[i][2]; 
var id = orders[i][0];
id_and_name = JSON.stringify(id_and_name);
content = content + "<div onClick='loadOrder("+id_and_name+")' class='btn btn-lg btn-info' 
id= '"+id+"'><span class='glyphicon glyphicon-shopping-cart'></span> 
ID: "+orders[i][0]+"</br>Name: " + orders[i][1]+"</div>";
    if (done == 0){
        alert("order not done");
        document.getElementById(id).style.color = "red";
        alert(id);
    }else{
        alert("order done");
        document.getElementById(id).style.color = "green";
        alert(id);
    }

document.getElementById("main_content").innerHTML = content;

var done=订单[i][2]；
var id=订单[i][0]；
id_和_name=JSON.stringify（id_和_name）；
内容=内容+”
ID:“+orders[i][0]+”
名称：“+orders[i][1]+”；
如果（完成==0）{
警报（“订单未完成”）；
document.getElementById（id）.style.color=“红色”；
警报（id）；
}否则{
警报（“订单完成”）；
document.getElementById（id）.style.color=“绿色”；
警报（id）；
}
document.getElementById（“主内容”）.innerHTML=content；

当我删除document.getElementById行并通过相应的分支运行时，代码不会出现语法错误。当我包含这些行时，我得到一个语法错误：VM882:125 UncaughtTypeError:无法读取null（…）的属性“style”

我不能以这种方式更改使用javascript创建的元素的颜色。如果不是，为什么？我应该使用什么方法

---

我还用alert（id）检查了id的值，它们很好。两者都是字符串，例如：“43”和“44”。我还尝试替换document.getElementById（id.style.color=“red”；带有document.getElementById（“43”）.style.color=“红色”；我得到了同样的错误。当我删除该行时，元素是用正确的ID创建的，但是我当然不能更改颜色。

如果出现此错误，这意味着当您尝试调用元素上的属性

style

时，元素是

null

。因此，这与您尝试更改元素颜色的方式无关。 这可能意味着您的

文档

对象不包含具有您提供给

getElementById（）

方法的

id

的元素。

---

当您试图调用

document.getElementById（id）

时，您会得到什么？直接在

控制台
中使用
警报中显示的
id
？
您还没有将元素插入DOM，因此您无法使用
getElementById
获得它

如果你真的创建了真实的元素，而不仅仅是字符串，这将变得容易得多

var done  = orders[i][2];
var id    = orders[i][0];
var id_and_name = JSON.stringify(id_and_name);
var div   = document.createElement('div');
var span  = document.createElement('span');
var text1 = document.createTextNode('ID: ' + orders[i][0]);
var text2 = document.createTextNode('Name: ' + orders[i][1]);
var br    = document.createElement('br');
var main  = document.getElementById("main_content");

div.className = 'btn btn-lg btn-info';
div.id = id;
div.addEventListener('click', function() {
    loadOrder(id_and_name);
},false);

span.className = 'glyphicon glyphicon-shopping-cart';

if (done == 0) {
    div.style.color = "red";
} else {
    div.style.color = "green";
}

// later, insert the elements in the DOM

main.appendChild(div);
main.appendChild(span);
main.appendChild(text1);
main.appendChild(br);
main.appendChild(text2);

我从评论中找到了两种解决方案：一种是在我创建元素后更改元素，另一种是我使用的，创建CSS类

var done = orders[i][2]; 
var id = orders[i][0];
id_and_name = JSON.stringify(id_and_name);
var button_colour = "red_background";
if (done == 1){
    button_colour = "green_background";
}

content = content + "<div onClick='loadOrder("+id_and_name+")' 
class='btn btn-lg btn-info "+button_colour+"' id= '"+id+"'><span class='glyphicon glyphicon-shopping-cart'></span> ID: "+orders[i][0]+"</br>Name: " + 
orders[i][1]+"</div>";
    document.getElementById("main_content").innerHTML = content;

该错误表示
document.getElementById（id）
未返回任何内容（为null）。所以您需要仔细检查是否有一个id与
id
变量相同的元素。您也可以只向要添加的html字符串中添加一个带有html样式属性的字符串，该属性包含该元素的css。为什么在创建完一个元素后，您已经拥有了所有创建时为其着色所需的信息？你在无缘无故地跳圈。只需在创建元素时添加适当的样式（即使用类）。但是，问题是您没有将
内容实际添加到文档的任何位置，因此新的
div
实际上不存在您没有将元素插入DOM，因此无法使用
getElementById
获取它。如果您开始使用
createElement
创建实际元素，而不是稍后使用字符串和内联javascript.ah，这将容易得多。用这个。document.getElementById（“主内容”）.innerHTML=content；我已经重新订购了。它是有效的。我应该删除这篇文章，还是可以接受这条评论作为答案？我遇到过很多人，他们声称使用DOM方法创建元素比只使用原始HTML要慢。想法？@Tibrogargan-在某些情况下是，在其他情况下不是，但创建实际元素会使使用这些元素更容易，即使这意味着要多写几个字符。你可以在答案中添加一个如何解决问题的示例。它会使答案更适用，你可能想考虑使用DOM操作技术（如@ Addio的答案演示）。对于非平凡的情况，尤其是当您利用jQuery的元素创建函数时，它更具可读性。
.green_background{
    background-color: green;
    outline-color:black;
}

.red_background{
    background-color: red;
    outline-color:black;
}