Question

我有一个JavaScript函数，可以创建一些DOM节点：

function setHeader(){
    var questionBox = document.createElement("div");
    questionBox.setAttribute("id","question" + (questionNumber + 1));
    document.body.insertBefore(questionBox,scriptBox);
    var questionElement = document.createElement("h3");
//  questionElement.setAttribute("id","question" + (questionNumber + 1));
    var questionText = document.createTextNode(questions[questionNumber].question);
    questionElement.appendChild(questionText);
    questionBox.appendChild(questionElement);
    $(questionBox).hide().fadeIn(1000);
}

此函数创建以下HTML：

<div id="questionHolder">
    <h3 id="question">Is the sky blue?</h3>
</div>

我想知道的是如何使用CSS设置div或h3元素的样式？

我假设在创建DOM节点之前读取了CSS文件，因为CSS在标题中链接，而我的JavaScript文件链接在我页面的body标记的末尾。< / p>

我认为这意味着CSS样式不会应用于创建的元素，我的测试也同意这一点。

谢谢，任何帮助表示赞赏。

编辑：

我更改了问题中的功能，使其更易于阅读。实际函数从数组中提取问题：

function setHeader(){
        var questionBox = document.createElement("div");
        questionBox.setAttribute("id","question" + (questionNumber + 1));
        document.body.appendChild(questionBox);
        var questionElement = document.createElement("h3");
        questionElement.setAttribute(questions[questionNumber].question));
        var questionText = document.createTextNode("Is the sky blue?");
        questionElement.appendChild(questionText);
        questionBox.appendChild(questionElement);
}

这似乎对我不起作用。这有什么改变吗？

Answer 1

当div附加到dom时，在css文件中写一些样式.it会在你写入时呈现

css文件

#questionHolder {
    background-color: green;
    width: 300px;
    height: 300px;
}

#question {
    background-color: blue;
}

演示：http://jsfiddle.net/DfD9y/

Answer 2

只需在脚本中添加样式属性，它将适合您，

questionBox.setAttribute("style",""background-color":"yellow"");

您的代码将如下所示，

function setHeader(){
    var questionBox = document.createElement("div");
    questionBox.setAttribute("id","questionHolder");
    questionBox.setAttribute("style",""background-color":"yellow"");
    document.body.appendChild(questionBox);
    var questionElement = document.createElement("h3");
    questionElement.setAttribute("id","question");
    var questionText = document.createTextNode("Is the sky blue?");
    questionElement.appendChild(questionText);
    questionBox.appendChild(questionElement);
}

如何使用JavaScript函数创建的CSS为DOM元素设置样式

2 个答案: