如何風格的CSS與JavaScript函數創建DOM元素

我有一個創建某些DOM節點的JavaScript函數：如何風格的CSS與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元素？

我認爲CSS文件是在創建DOM節點之前讀取的，因爲CSS在頁眉中鏈接並且我的JavaScript文件在我的頁面的body標記的末尾被鏈接。

我認爲這意味着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); 
}

這似乎不適合我。這會改變什麼嗎？

來源

2014-01-30 Kane

我曾嘗試它。它沒有工作？堅持也許我有一個錯誤的地方 – Kane

作爲@AlienArrays寫道，它應該爲你工作。的jsfiddle例如：http://jsfiddle.net/6vSE8/ – Avisho

好，我看到的作品，是否有所作爲，如果我拉出來的問題的陣列？我將編輯我的問題 – Kane

就在添加樣式屬性你的腳本，它會爲你工作，

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); 
}

來源

2014-01-30 08:14:26 Shivam

寫在CSS文件中的一些風格時，DIV追加到DOM，你在

css文件編寫。它將使

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

#question { 
    background-color: blue; 
}

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

來源

2014-01-30 08:12:28

如何風格的CSS與JavaScript函數創建DOM元素

回答

相關問題