javascript - Style.color = "blue"不起作用

Question

在我的应用程序中，我遇到标题颜色未更改的问题。我的代码在这里:

    var createc = function(){

        var valu = prompt("Phone no.");
        var name = prompt("Name");
        var age = prompt("age"); 

        var CC = function(valu, name, age){
        var parent = document.createElement("div");
            parent.id = valu;
            parent.setAttribute("onclick", "info()");
        var heading = document.createTextNode("phone no: "+valu+" Name:"+name+" Age: "+age);
            heading.style.color = "blue";
        parent.appendChild(heading);    

        var ele = document.getElementById("main");
        ele.appendChild(parent);

        }(valu, name, age);

    }

在这里你可以看到 var heading = document.createTextNode("phone no: "+valu+"Name:"+name+"Age: "+age); 我现在有一个变量在下一行我写了 heading.style.color="blue"; 我认为是正确的!如果我不是，请告诉我我做错了什么

Answer 1

heading 是一个 TextNode，只有 ElementNode 有一个 style 属性。

将 TextNode 放在合适的 ElementNode 中(因为它是一个标题，Hn 可能是最好的选择)并为其设置样式。

var heading = document.createElement('h1');
heading.appendChild(
    document.createTextNode("phone no: "+valu+" Name:"+name+" Age: "+age)
);
heading.style.color = "blue";

但是，根据经验，最好在样式表中编写样式并创建合适的元素(如果需要，使用合适的类)以匹配您在此处编写的规则。

即放 h1 { 颜色:蓝色； 在您的样式表中，而不是使用上面代码中的最后一行。