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

【问题标题】：JAVASCRIPT - Dynamic Createt Div's won't take the given style ( width & height )JAVASCRIPT - 动态创建 Div 不会采用给定的样式（宽度和高度）
【发布时间】：2012-10-11 17:11:10
【问题描述】：

我正在尝试使用用户输入值（如数量和大小）创建一些 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 文件中，然后看看我的意思。

感谢您的帮助。 g.r.王牌

编辑：

问题是 100% 在循环内部，即创建 div 的地方。

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

【问题讨论】：

标签： javascript css html dynamic

【解决方案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()+ ";");

【讨论】：

它对我有用。谢谢你的答案。无论如何，我仍然想知道为什么“流行”的方式不起作用..
@Ace - 请参阅我在顶部的编辑以获取对此的解释。几乎只是语法中的一个简单错误。缺少.style.width 和"px;"。有时我注意到使用.style.width 的效果不如使用 setAttribute 好，这就是为什么我建议使用它并且我只在做这样的事情时使用它。
是的，已经想像现在^^我应该睡一觉而不是通宵工作X_X谢谢你:)

【解决方案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";

【讨论】：

我已将其修改为 newDiv.style.width = boxsize + "px"，它确实有效。至少它似乎是因为我不确定它是什么意思，但我设法得到了我提供的尺寸的随机彩色盒子。每当您给 .style.something 值时，它们必须具有“px”后缀（例如 .style.top），而常规 DOM 属性不会接受它们。
是的，我已经想象我忘记了顶部和左侧值的 +“px”。但是已经解决了