Question

这里我有一个创建div框的函数，但我希望将样式移动到外部css文件。然而，当我这样做时，盒子不再是样式。如何将css应用于动态创建的div框？是否值得将样式移动到外部css文件？

    function createBox() {
        var box = document.createElement("DIV");
        box.setAttribute("id", "box");
        document.body.appendChild(box);
        boxStyle = box.style;
        boxStyle.position = "absolute"; 
        boxStyle.background = '#'+Math.floor(Math.random()*16777215).toString(16);
        boxStyle.width = Math.floor(Math.random()*50) + '%';
        boxStyle.height = Math.floor(Math.random()*50) + '%';
        boxStyle.top = Math.floor(Math.random()*100) + '%';
        boxStyle.left = Math.floor(Math.random()*100) + '%';
    }

编辑：我意识到在我的CSS中让我感到悲伤的是我使用的是不能在CSS中工作的Math.floor和Math.random（）函数。傻傻的我！

Answer 1

在您创建ID为#box的div时，请在外部css文件中添加以下css并将其包含在<head>

中

#box {
          position: absolute;
          background: red;
          width: 90px;
          height: 50px;
          left: 100;
          top: 100;
        }

您似乎会使用相同的boxes id创建更多#box。我建议你根据类创建。并使用css根据类名应用样式。

function createBox() {
        var box = document.createElement("DIV");
        box.setAttribute("class", "boxes");
        document.body.appendChild(box);
    }

css：

.boxes {
    position: absolute;
    background: red;
    width: 90px;
    height: 50px;
    left: 100;
    top: 100;
 }

<强> demo

Answer 2

您可以将CSS应用于动态创建的项目，方法与普通HTML相同。您所需要的只是定位正确的选择器。

http://codepen.io/anon/pen/mnIhj

Answer 3

您可以在外部样式表的类中收集要应用于div框的属性，并使用：

function createBox() {
        var box = document.createElement("DIV");
        box.setAttribute("id", "box");
        box.className = "boxStyle";
        document.body.appendChild(box);
    }

Answer 4

在脚本中尝试此更改

 function createBox() {
    var box = document.createElement("DIV");
    box.setAttribute("id", "box");
    document.body.appendChild(box);
    var boxStyle = document.getElementById("box").style;
    boxStyle.position = "absolute"; 
    boxStyle.background = '#'+Math.floor(Math.random()*16777215).toString(16);
    boxStyle.width = Math.floor(Math.random()*50) + '%';
    boxStyle.height = Math.floor(Math.random()*50) + '%';
    boxStyle.top = Math.floor(Math.random()*100) + '%';
    boxStyle.left = Math.floor(Math.random()*100) + '%';
}

如何将css应用于动态创建的div？

4 个答案: