JavaScript動態Createt Div不會採取給定的樣式（寬度和高度）

我想創建一些div，用戶輸入值如數量和大小。JavaScript動態Createt Div不會採取給定的樣式（寬度和高度）

在我現在的情況下，divs是createt，但在outoput html（firefox - >顯示選定的源代碼）中，他們沒有使用'.style.top'，'.style.left'，' .width'（或.style.width）和'.height'（或.style.height）。

第一個createt div有 - > style =「top：0px; left：0px; ...」只有 - > style =「top：0px;。」// //'left'attrib不再出現以下所有的div都沒有top或left。

也沒有任何一個createt 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>

你可以科特複製到空白的html文件，看看，WHYT我的意思。

thx爲您提供所有幫助。 G.R。王牌

編輯：

問題是環路，其中div的創建內100％。

在第一個版本中，我簡單地硬編碼的div（空白div）的數量，但現在它應該是動態的..問題開始。

來源

2012-10-21 Ace

如上所述，問題出在你的循環中。主要問題是您應該使用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-21 21:13:08

我會試試看.. – Ace

它爲我工作。 thx的答案。無論如何，我仍然想知道爲什麼「流行」的方式不起作用。 – Ace

@Ace - 請參閱我的編輯頂部的解釋。在你的語法中幾乎只是一個簡單的單詞。缺少'.style.width'和'「px;」'。有時我注意到使用'.style.width'並不像使用setAttribute那樣工作，這就是爲什麼我建議使用它，並且在做這樣的事情時我完全使用它。 –

你給了無效的屬性值。這是因爲你設置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-21 21:15:18 Powerslave

我寫了，我試了。寬和.style.width ... – Ace

我'我修改它爲newDiv.style.width = boxsize +「px」，它絕對有效。至少這似乎是因爲我不確定它是什麼意思，但我設法隨機獲得了隨機大小的彩盒。每當你給.style.something值，他們必須有「px」後綴（例如.style.top），而常規的DOM屬性不會接受它們。 – Powerslave

是的，我已經想象，我已經忘了+「px」的頂部和左側值。但已經解決了 – Ace

JavaScript動態Createt Div不會採取給定的樣式（寬度和高度）

回答

相關問題