JAVASCRIPT-动态Createt Div'；韩元'；t采用给定样式（宽度和高度）_Javascript_Css_Html_Dynamic

JAVASCRIPT-动态Createt Div'；韩元'；t采用给定样式（宽度和高度）

javascript css html dynamic

JAVASCRIPT-动态Createt Div'；韩元'；t采用给定样式（宽度和高度）,javascript,css,html,dynamic,Javascript,Css,Html,Dynamic,我正在尝试创建一些div，其中包含用户输入的值，如amount和size 在我现在的情况下，div是创建的，但在outoput html（firefox->show selected source）中，它们没有使用给定的属性，如“.style.top”、““.style.left”、““.width”（或.style.width）和“.height”（或.style.height）第一个createt div具有->style=“top:0px；left:0px；” 第二个属性只有->styl

我正在尝试创建一些div，其中包含用户输入的值，如amount和size

在我现在的情况下，div是创建的，但在outoput html（firefox->show selected source）中，它们没有使用给定的属性，如“.style.top”、““.style.left”、““.width”（或.style.width）和“.height”（或.style.height）

第一个createt div具有->style=“top:0px；left:0px；” 第二个属性只有->style=“top:0px；”。//左属性不再显示下面所有的div都没有top或left

此外，没有一个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>


容器模式生成器
身体{
}
.div_集装箱{
位置：绝对位置；
边框：实心1px#000；
}
函数生成（）{
var-boxSize=document.getElementById（“txt_-boxSize”）.value；
var width=document.getElementById（“txt_width”）.value；
var height=document.getElementById（“txt_height”）.value；
如前所述，对于（var i=1；i，问题在您的循环中。主要问题是您应该使用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()+ ";"); 

您提供的属性值无效。这是因为您正在将newDiv.height和newDiv.width设置为非数字值，而不是newDiv.style.height和newDiv.style.width设置为非数字值。请将这些值填充到样式属性中，并加上足够的字符即可
此外，如果您尝试将代码模块化一点，那么调试/维护和其他人理解起来可能会更容易
编辑
这意味着我将尝试以下方法（无重构）：
这对我来说很有用。答案是thx。不管怎样，我仍然想知道为什么“流行”的方式不起作用。@Ace-请参阅顶部的我的编辑以获得解释。几乎只是语法中的一个简单错误。缺少.style.width
和“px；”
。有时我注意到使用.style.width不如使用setAttribute，这就是为什么我建议使用它，并且我在做类似的事情时只使用它。是的，allready想象一下，现在^^^我应该睡一觉，而不是通宵工作。谢谢：）我已经将它修改为newDiv.style.width=boxsize+“px”，它确实起了作用。至少它似乎起到了作用，因为我不确定它的用途，但我设法得到了带有我提供的大小的随机彩色框。无论何时给.style.something值，它们都必须有“px”后缀（例如.style.top），而常规的DOM属性不接受它们。是的，我已经想象我忘记了+的“px”表示左上角的值。但是它已经解决了
newDiv.style.width = boxSize + "px";
newDiv.style.height = boxSize + "px";
newDiv.style.top = (( i - 1 ) * boxSize) + "px";
newDiv.style.left = (( ii - 1 ) * boxSize) + "px";