Question

我正在使用JS创建一些东西我似乎无法将样式标记添加到我通过javascript创建的div（我没有为css创建一个类，因为我没有建议它）这里是我的代码

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

我似乎无法获得第二个for循环来放置样式标记。 div只显示除了上面设置的类名。但我无法在那里得到风格。这些样式是我插入客户网站的表单中的两个按钮。我怎样才能让它发挥作用？我做错了什么？

Answer 1

您的代码不会将样式应用于输入字段，因为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/

中进行的工作测试

Answer 2

这将有效 - divContainer[divContainerStyles].setAttribute('style', <your styles>)

Answer 3

使用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);

将样式标记设置为div时出现问题

3 个答案: