1

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

在我的情况下，现在 div 已创建，但在输出 html （ firefox -> show selected source ）中，它们没有采用给定的属性，如 '.style.top' 、 '.style.left' 、 '.width' （或 .style.width ）和 '.height' （或 .style.height ）。

第一个创建 div 有 -> style="top:0px; left:0px; . . ." 第二个只有 -> style="top:0px; . . " // 'left' 属性不再出现，并且所有以下 div 都没有顶部或左侧。

也没有任何创建的 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 文件中，然后看看我的意思。

谢谢你的帮助。优雅

编辑：

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

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

4

2 回答 2

0

如前所述，问题出在您的循环中。主要问题是您应该使用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()+ ";");
于 2012-10-21T21:13:08.597 回答
0

您提供了无效的属性值。这是因为您将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";
于 2012-10-21T21:15:18.603 回答