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

您缺少顶部，左侧，宽度，高度的“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”等后缀。

Answer 2

尝试

body{ position: relative; }

当内容默认具有位置（静态）时，节点子节点的边距不能正常工作

Answer 3

感谢Atul指出我的错误。

我想出了desired效果。由于我已将div的位置设为绝对，因此使用style.direction设置位置就足够了。

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

在循环的每次迭代中，我将宽度和高度递减10，应该是20.这是因为只有当我将内部div的宽度设置为小于外部div的20时，内部和外部div整体出现。否则只显示左边框和上边框。

marginTop无法在javascript中工作

3 个答案: