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

Question

我正在尝试更改使用 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;

当我删除 document.getElementById 行并运行相应的分支时，代码可以正常工作而不会出现语法错误。当我包含这些行时，出现语法错误:VM882:125 Uncaught TypeError: Cannot read property 'style' of null(...)。

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

我还使用 alert(id) 检查了 id 的值，它们都很好。两者都是字符串，例如:“43”和“44”。我还尝试替换 document.getElementById(id).style.color = "red";使用 document.getElementById("43").style.color = "red";我得到了同样的错误。当我删除该行时，将使用正确的 ID 创建元素，但当然我无法更改颜色。

Answer 1

您尚未将该元素插入到 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);