动态创建DIV,不是在飞行时采用高度和宽度

时间:2012-02-18 06:24:06

标签: javascript jquery

我想基于一些计算动态创建div。我可以动态地构建div,但唯一的问题是它没有在fly上使用高度和宽度。请尽可能分享他们的视图或代码。

这是我用来参考的脚本。

<script type="text/javascript" language="javascript">
   function createDiv()
   {
            var totalheight=400;
            var totalwidth = 600;
            var height = 80;
            var width = 40;
            var divheight = totalheight / height;
            var divwidth = totalwidth / width;
            var id=1;

            for(var i=1;i<=divheight;i++)
            {
                var eh=divwidth;
                var fh=1;
                for (var w = 1; w <= divwidth; w++)
                {
                   var div=document.createElement("<div id='"+id+"' style=\"background:#F0E68C;width:'"+width+"'px;height:'"+height+"'px;border:solid 1px #c0c0c0;padding: 0.5em;text-align: center;float:left;\"></div>"); 
                   document.body.appendChild(div);
                   eh=eh+divheight;
                   fh=fh+divheight;
                   id++;
                }
                 var div1=document.createElement("<br/>");
                 document.body.appendChild(div1);
            }     
    }
    </script>

提前致谢。

2 个答案:

答案 0 :(得分:3)

试试这个..希望这就是你要做的......

<html>

<script type="text/javascript" >
 function newDiv(){
            var totalheight=400,ht = 80 , totalwidth = 600 ,wd = 40 ,i;
            var divheight = totalheight / ht;
            var divwidth = totalwidth / wd;
            var id=1;

            for(var i=1;i<=divheight;i++)
            {
                var eh=divwidth;
                var fh=1;
                for (i = 1; i <= divwidth; i++)
                {
                   var div=document.createElement("div")
                   div.setAttribute("id","newDivId"+id)
                   div.setAttribute("class","newDiv")
                   div.style.width =wd+"px";
                   div.style.height =ht+"px";
                   document.body.appendChild(div);
                   eh=eh+divheight;
                   fh=fh+divheight;
                   id++;
                }
                 var div1=document.createElement("<br/>");
                 document.body.appendChild(div1);
            }     
    }
</script>
<style type="text/css">
.newDiv{
    background-color:#F0E68C;
    border:1px solid #c0c0c0;
    padding: 0.5em;
    text-align:center;
    float:left;
}
</style>
<body>
    <input type="button" onclick="newDiv()" value="Click Me">
</body>
</html>

答案 1 :(得分:0)

看起来你没有向div中添加任何内容,所以你不会看到任何东西,除非你有一些像边框这样的视觉样式在屏幕上看到它。

这里有几点需要注意

  • 如果要设置内联高度和宽度,请指定单位 例如pxem等。
  • 添加一些视觉样式以显示在屏幕上

<强> Demo