我正在尝试创建一些div，用户输入值（例如量和大小）。
在我的情况下，DIVS是造物来，但是在Outoput HTML（firefox->显示选定的源）中，他们没有像'.spyle.top'，'.STYLE.LEFT'，'那样采用给定的属性。宽度'（或.pstyle.width）和'.height'（或.pstyle.height）。
第一个造器div具有 -> style =" top：0px; left：0px;。。"Secont One只有 -> style =" top：0px;。。"//'左'属性不再出现并且所有以下divs都没有顶部或左上。
也没有将造器师divs带到宽度和高度。
这是我的代码，它简单而基本，但我无法弄清楚问题：
<!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文件，然后查看Whyt我的意思。
thx您的所有帮助。G.R.Ace
编辑：
问题是在创建DIV的循环内100％。
在第一个版本中但是现在它应该是动态的。问题开始了。
如前所述，问题在您的循环中。主要问题是您应该使用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.style.height.height and newdiv.style.style.widthth到非数字值。将值填充到样式属性中，以足够的用途，并且可以正常工作。
另外，如果您尝试对代码进行模块化，则可能更容易调试/维护和其他人理解。
编辑
意味着我会尝试此（无重构）：
newDiv.style.width = boxSize + "px";
newDiv.style.height = boxSize + "px";
newDiv.style.top = (( i - 1 ) * boxSize) + "px";
newDiv.style.left = (( ii - 1 ) * boxSize) + "px";