Question

我正在尝试使用用户输入值（如数量和大小）创建一些div。

在我的情况下，现在div是createt但是在outoput html（firefox - ＆gt; show selected source）中，他们没有采用'.style.top'，'。style.left'，'等给定属性。 .width'（或.style.width）和'.height'（或.style.height）。

第一个createt div有 - ＆gt; style =“top：0px; left：0px; ...” secont只有 - ＆gt; style =“top：0px; ..”//'left'attrib不再出现并且所有以下div都没有顶部或左侧。

也没有任何createt div取宽度和高度。

这是我的代码，它的简单和基本，但我无法弄清楚问题：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Container Pattern Generator</title>
    <style type="text/css">
        body {

        }

        .div_container {
            position:absolute;
            border:solid 1px #000;
        }
    </style>
    <script type="text/javascript">
        function generate() {
            var boxSize = document.getElementById("txt_boxSize").value;
            var width = document.getElementById("txt_width").value;
            var height = document.getElementById("txt_height").value;
            for( var i = 1; i <= height; i++ ) {
                for( var ii = 1; ii <= width; ii++ ) {
                    var newDiv = document.createElement("div");
                    newDiv.setAttribute("id", "div_container_" + i + "_" + ii);
                    newDiv.setAttribute("class", "div_container");
                    newDiv.width = boxSize + "px";
                    newDiv.height = boxSize + "px";
                    newDiv.style.top = ( i - 1 ) * boxSize;
                    newDiv.style.left = ( ii - 1 ) * boxSize;
                    newDiv.style.backgroundColor = getRandColor();
                    document.getElementById("div_main").appendChild( newDiv );
                    alert("ok");
                }
            }
        }

        function getRandColor() {
            var array = new Array( "#FF0000", "#FF8000", "#FF0000", "#01DF01", "#FF0000", "#0404B4", "#FF8000", "#F2F2F2" );
            return array[ randNum( 0, array.length ) ];
        }

        function randNum( min, max ) {
            var num = Math.floor( Math.random() * ( 1 + max - min ) ) + min;
            return num;
        }
    </script>
</head>

<body>
    <p>Width : <input type="text" value="2" id="txt_width" style="width:50px;"/> - Height : <input type="text" value="2" id="txt_height" style="width:50px;"/> - Box Size : <input type="text" value="40" id="txt_boxSize" style="width:50px;"/> - <input type="button" value="Generate" onClick="generate();"/></p>
    <div id="div_main" style="position:absolute; width:100%; height:100%; background-color:#999;">
    </div>
</body>

你可以将cote复制到一个空白的html文件，看看为什么我的意思。

感谢你的所有帮助。 G.R。王牌

修改

问题在循环内部是100％，其中创建了div。

在第一个版本中，我只是硬编码了div的数量（空白div）但现在它应该是动态的......问题就开始了。

Answer 1

如上所述，问题出在您的循环中。主要问题是您应该使用setAttribute附加这些样式。此外，您的顶部和左侧定义需要在其上具有“px”，并且您的宽度和高度不使用右侧挂钩。如果您尝试newDiv.style.width或newDiv.style.width，则可以使用它们。但是，我认为最好坚持使用setAttribute。见这个例子：

所有这一切：

newDiv.width = boxSize + "px";
newDiv.height = boxSize + "px";
newDiv.style.top = ( i - 1 ) * boxSize;
newDiv.style.left = ( ii - 1 ) * boxSize;
newDiv.style.backgroundColor = getRandColor();

可以成为：

var divTop = parseInt((i - 1)*boxSize) + "px;";
var divLeft = parseInt((ii - 1)*boxSize) + "px;";
newDiv.setAttribute("style",
  "top: " + divTop + 
  "left: " + divLeft + 
  "width: " + boxSize + 
  "px;height: " + boxSize + "px;background-color:"+getRandColor()+ ";");

Answer 2

您提供了无效的属性值。这是因为您设置 newDiv.height 和 newDiv.width 而不是 newDiv.style.height 和 newDiv.style.width 为非数字值。将值填充到样式属性中，并且足够，并且它将起作用。

另外，如果您尝试对代码进行模块化，则可能更容易调试/维护，也可能让其他人理解。

修改

意思是我试试这个（没有重构）：

newDiv.style.width = boxSize + "px"; newDiv.style.height = boxSize + "px"; newDiv.style.top = (( i - 1 ) * boxSize) + "px"; newDiv.style.left = (( ii - 1 ) * boxSize) + "px";

JAVASCRIPT - 动态创建Div不会采用给定的样式（宽度和高度）

2 个答案: