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

【问题标题】：How can I change the colour of an element I have created using javascript如何更改使用 javascript 创建的元素的颜色
【发布时间】：2016-11-06 21:14:53
【问题描述】：

我正在尝试更改使用 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"; with document.getElementById("43").style.color = "red";我得到同样的错误。当我删除该行时，将使用正确的 ID 创建元素，但当然我不能更改颜色。

【问题讨论】：

该错误表明document.getElementById(id) 没有返回任何内容（它为空）。因此，您需要仔细检查您是否有一个 id 与 id 变量相同的元素。
您也可以只添加一个带有 html 样式属性的字符串，该属性包含元素的 css 到您要添加的 html 字符串中。
为什么要在创建元素后对其进行着色，而在创建元素时已经拥有了为它着色所需的所有信息？你无缘无故地跳槽。只需在创建元素时添加适当的样式（即使用类）。但是问题是您实际上并未在任何地方添加 content 到文档中，因此您的新 div 实际上并不存在
您还没有将元素插入到 DOM 中，因此您无法使用 getElementById 获取它。如果您开始使用 createElement 创建实际元素而不是使用字符串和内联 javascript，这会容易得多。
啊，以后会这样。有了这个。 document.getElementById("main_content").innerHTML = content;我已经重新订购了。它有效。我应该删除这篇文章还是可以接受该评论作为答案？

标签： javascript jquery

【解决方案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);

【讨论】：

我遇到过很多人声称使用 DOM 方法创建元素比仅使用原始 HTML 慢。想法？
@Tibrogargan - 在某些情况下是这样，在其他情况下不是，但创建实际元素可以更轻松地使用这些元素，即使这意味着要多写几个字符。跨度>

【解决方案2】：

我从 cmets 中找到了 2 个解决方案：一个是在我制作完元素后更改它，第二个是我使用的那个，是创建 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;

CSS：

.green_background{
    background-color: green;
    outline-color:black;
}

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

【讨论】：

您可能需要考虑使用 DOM 操作技术（如 @adeneo 的回答所示）。对于非平凡的情况，它更具可读性，特别是如果您利用 jQuery 的元素创建功能。

【解决方案3】：

如果您收到此错误，这意味着当您尝试在您的元素上调用属性style 时，该元素是null。因此，这与您尝试更改元素颜色的方式无关。这可能意味着您的document 对象不包含您提供给getElementById() 方法的id 元素。当您尝试使用alert 中显示的id 直接在Console 中调用document.getElementById(id) 时会得到什么？

【讨论】：

您可以在答案中添加如何解决问题的示例。这将使答案更适用