marginTop在javascript中不工作

Question

我試圖運行一個腳本來在正方形內繪製正方形圖案。所以我做到了。

var bodyNode = document.getElementsByTagName("body")[0]; 
var width = 600, height = 600; 
var top = 10, left = 10; 
while(width > 30) 
{ 
    var divNode = document.createElement("div"); 
    divNode.style.position = "absolute"; 
    divNode.style.marginLeft = left; 
    divNode.style.marginTop = top; 

    divNode.style.width = width; 
    divNode.style.height = height; 
    divNode.style.background = randomColor(); 

    bodyNode.appendChild(divNode); 

    width -= 10; 
    height -= 10; 
    top += 10; 
    left += 10; 

} 

function randomColor() 
    { 
     var color = "#"; 
     for(var i =0; i < 6; i++) 
     { 
      var number = Math.floor(Math.random() * 10); 
      color += number; 
     } 
    return color; 
    } 

但它被添加到div在運行時的屬性是：

element.style { 
    position: absolute; 
    margin-left: 260px; 
    width: 350px; 
    height: 350px; 
    background: rgb(88, 88, 5); 
} 

我想實現this效果，但我得到一個不同的模式如下圖所示的形象。

我錯過了什麼？

P.S：我不使用jQuery。

Answer 1

感謝阿圖爾指出我的錯誤。我想出了desired的效果。由於我已將div的位置設置爲絕對位置，因此使用style.direction設置位置就足夠了。

divNode.style.top = top + "px"; 
divNode.style.left = left + "px"; 

而在循環的每次迭代，我已經遞減的寬度和高度由10應該是20。這是因爲只有當我設置內div的寬度是外小於20 div，內部和外部div都作爲一個整體出現。否則只會顯示左邊框和上邊框。

Answer 2

嘗試

body{ position: relative; }

當內容在默認情況下（靜態）的位置子節點的邊緣不工作頂部的正確

Answer 3

你缺少「PX」後綴，左，寬度，高度 查看您在這裏更正的代碼 -https://jsfiddle.net/jw2rohr5/

你糾正碼 -

var bodyNode = document.getElementsByTagName("body")[0]; 
var width = 600, height = 600; 
var top = 10, left = 10; 
while(width > 30) 
{ 
    var divNode = document.createElement("div"); 
    divNode.style.position = "absolute"; 
    divNode.style.marginLeft = left + "px"; 
    divNode.style.marginTop = top + "px"; 

    divNode.style.width = width + "px"; 
    divNode.style.height = height + "px"; 
    divNode.style.background = randomColor(); 

    bodyNode.appendChild(divNode); 

    width -= 10; 
    height -= 10; 
    top += 10; 
    left += 10; 

} 



function randomColor() 
    { 
     var color = "#"; 
     for(var i =0; i < 6; i++) 
     { 
      var number = Math.floor(Math.random() * 10); 
      color += number; 
     } 
    return color; 
    } 

你應該給後綴，如 「％」， 「PX」 等。