將樣式標記設置爲div的問題

我使用JS創建了一些東西，但似乎無法將樣式標記添加到通過javascript創建的div中（我沒有爲CSS創建類，因此不建議使用它）這是我的代碼將樣式標記設置爲div的問題

function createForm() 
{ 
    var container = document.getElementsByClassName("container-fluid"); 
    var formElement = document.createElement("form"); 
    var inputName = document.createElement("input"); 
    var inputEvent = document.createElement("input"); 
    var inputTime = document.createElement("input"); 
    var sendWithTimer = document.createElement("input"); 
    var sendWithoutTimer = document.createElement("input"); 
    var divContainer = document.createElement("div"); 
    formElement.className = "form"; 
    divContainer.className = "enforce-styles"; 
    inputName.className = "name"; 
    inputEvent.className = "event"; 
    inputTime.className = "time"; 
    sendWithTimer.className = "sendWithTimer"; 
    sendWithoutTimer.className = "sendWithoutTimer"; 
    inputName.setAttribute('type', "text"); 
    inputEvent.setAttribute('type', "text"); 
    inputTime.setAttribute('type', "text"); 
    inputName.setAttribute('placeholder', "Name"); 
    inputEvent.setAttribute('placeholder', "Event"); 
    inputTime.setAttribute('placeholder', "Time"); 
    sendWithTimer.setAttribute('type', "button"); 
    sendWithoutTimer.setAttribute('type', "button"); 
    sendWithTimer.setAttribute('value', "Timer"); 
    sendWithoutTimer.setAttribute('value', "No timer"); 
    formElement.appendChild(inputName); 
    formElement.appendChild(inputEvent); 
    formElement.appendChild(inputTime); 
    divContainer.appendChild(sendWithTimer); 
    divContainer.appendChild(sendWithoutTimer); 
    for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++) 
    { 
     formElement[formElementStyles].style.display = "-webkit-flex"; 
     formElement[formElementStyles].style.display = "flex"; 
     formElement[formElementStyles].style.webkitFlexDirection = "column"; 
     formElement[formElementStyles].style.flexDirection = "column"; 
     formElement[formElementStyles].style.position = "relative"; 
     formElement[formElementStyles].style.top = 0; 
     formElement[formElementStyles].style.left = 40 + "%"; 
     formElement[formElementStyles].style.padding = 0.6 + "em"; 
     formElement[formElementStyles].style.margin = 1 + "em"; 
    } 
    for (var divContainerStyles = 0; divContainerStyles < divContainer.length; divContainerStyles++) 
    { 
     divContainer[divContainerStyles].style.display = "-webkit-flex"; 
     divContainer[divContainerStyles].style.display = "flex"; 
     divContainer[divContainerStyles].style.webkitFlexDirection = "column"; 
     divContainer[divContainerStyles].style.flexDirection = "column"; 
     divContainer[divContainerStyles].style.position = "relative"; 
     divContainer[divContainerStyles].style.top = 0; 
     divContainer[divContainerStyles].style.left = 40 + "%"; 
     divContainer[divContainerStyles].style.padding = 0.6 + "em"; 
     divContainer[divContainerStyles].style.margin = 1 + "em"; 
     divContainer[divContainerStyles].style.height = 10 + "em"; 
    } 
    container[0].appendChild(formElement); 
    container[0].appendChild(divContainer); 
}

我似乎無法得到第二個循環放置樣式標籤。 div只出現在上面的類名中。但我無法在那裏獲得風格。這些樣式適用於我插入客戶網站的表單中的兩個按鈕。我怎樣才能使這個工作？我究竟做錯了什麼？

來源

2016-06-07 user6031759

什麼divContainer [divContainerStyles] .setAttribute（「風格」，） –

這會工作，請張貼在回答中，因此我只能接受它 – user6031759

一個想法：使用JS設置DOM元素的類並實際讓CSS設置樣式可能會更好。這將避免你在那裏得到的代碼，並堅持在Web開發中分離問題的好原則。 –

這將與工作divContainer[divContainerStyles].setAttribute('style', <your styles>)

來源

2016-06-07 19:30:55

嗯沒有工作... – user6031759

您的代碼不會將樣式應用到輸入字段，因爲divContainer.length不存在，同樣沒有divContainer[divContainerStyles]。 divContainer是一個div對象，沒有length屬性（與form元素相反，它有一個length屬性），所以這就是爲什麼它永遠不會進入第二個循環。

你的代碼產生以下錯誤：https://jsfiddle.net/tdbju0ud/

相反，你應該檢查divContainer.childNodes的長度和樣式應用到這些。

for (var divContainerStyles = 0; divContainerStyles < divContainer.childNodes.length; divContainerStyles++) 
{ 
    divContainer.childNodes[divContainerStyles].style.display = "-webkit-flex"; 
    ... 
}

在工作測試：https://jsfiddle.net/Lvq6hvxd/

來源

2016-06-07 19:37:53

[錯誤] - create-form.js：50未捕獲TypeError：無法讀取未定義的屬性'style' – user6031759

小提琴中的代碼適合你嗎？如果是這樣，那麼錯誤必須來自代碼中的其他地方。確保第二個循環中的所有引用都包含'childNodes'位和任何可能的拼寫錯誤。如果你發佈更多的代碼，我可以進一步檢查。 –

錯誤 - divContainer的長度undefined – user6031759

使用的childNodes得到的div容器的子元素。像

var nodes = divContainer.childNodes

找出長度此節點數組對象，找出孩子的div元素計數。

以下是更正代碼：

var container = document.getElementsByClassName("container-fluid"); 
    var formElement = document.createElement("form"); 
    var inputName = document.createElement("input"); 
    var inputEvent = document.createElement("input"); 
    var inputTime = document.createElement("input"); 
    var sendWithTimer = document.createElement("input"); 
    var sendWithoutTimer = document.createElement("input"); 
    var divContainer = document.createElement("div"); 
    formElement.className = "form"; 
    divContainer.className = "enforce-styles"; 
    inputName.className = "name"; 
    inputEvent.className = "event"; 
    inputTime.className = "time"; 
    sendWithTimer.className = "sendWithTimer"; 
    sendWithoutTimer.className = "sendWithoutTimer"; 
    inputName.setAttribute('type', "text"); 
    inputEvent.setAttribute('type', "text"); 
    inputTime.setAttribute('type', "text"); 
    inputName.setAttribute('placeholder', "Name"); 
    inputEvent.setAttribute('placeholder', "Event"); 
    inputTime.setAttribute('placeholder', "Time"); 
    sendWithTimer.setAttribute('type', "button"); 
    sendWithoutTimer.setAttribute('type', "button"); 
    sendWithTimer.setAttribute('value', "Timer"); 
    sendWithoutTimer.setAttribute('value', "No timer"); 
    formElement.appendChild(inputName); 
    formElement.appendChild(inputEvent); 
    formElement.appendChild(inputTime); 
    divContainer.appendChild(sendWithTimer); 
    divContainer.appendChild(sendWithoutTimer); 
    for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++) { 
     formElement[formElementStyles].style.display = "-webkit-flex"; 
     formElement[formElementStyles].style.display = "flex"; 
     formElement[formElementStyles].style.webkitFlexDirection = "column"; 
     formElement[formElementStyles].style.flexDirection = "column"; 
     formElement[formElementStyles].style.position = "relative"; 
     formElement[formElementStyles].style.top = 0; 
     formElement[formElementStyles].style.left = 40 + "%"; 
     formElement[formElementStyles].style.padding = 0.6 + "em"; 
     formElement[formElementStyles].style.margin = 1 + "em"; 
    } 
var divChildNodes = divContainer.childNodes; 
    for (var divContainerStyles = 0; divContainerStyles < divChildNodes.length; divContainerStyles++) { 
     divChildNodes[divContainerStyles].style.display = "-webkit-flex"; 
     divChildNodes[divContainerStyles].style.display = "flex"; 
     divChildNodes[divContainerStyles].style.webkitFlexDirection = "column"; 
     divChildNodes[divContainerStyles].style.flexDirection = "column"; 
     divChildNodes[divContainerStyles].style.position = "relative"; 
     divChildNodes[divContainerStyles].style.top = 0; 
     divChildNodes[divContainerStyles].style.left = 40 + "%"; 
     divChildNodes[divContainerStyles].style.padding = 0.6 + "em"; 
     divChildNodes[divContainerStyles].style.margin = 1 + "em"; 
     divChildNodes[divContainerStyles].style.height = 10 + "em"; 
    } 
    container[0].appendChild(formElement); 
    container[0].appendChild(divContainer);

來源

2016-06-07 19:51:40 SunilA

無法讀取未定義的屬性'長度'我只會做出ID和樣式他們 – user6031759

你使用什麼瀏覽器？它實際上對我來說工作得很好。 – SunilA

以下是正在運行的代碼腳本：https：//jsfiddle.net/sj16ntt0/ – SunilA

將樣式標記設置爲div的問題

回答

相關問題