javascript 动态创建 DIV，不会动态获取高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9339173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating DIV dynamically, is not taking height and width on fly
提问by naani
I want to create div dynamically based on some calculations.I am able build div's dynamically but the only issue is it's not taking height and width on fly.please any one share their view or code if possible.
我想根据一些计算动态创建 div。我能够动态构建 div，但唯一的问题是它不会即时获取高度和宽度。如果可能，请任何人分享他们的视图或代码。
Here's the script which i used for your reference.
这是我供您参考的脚本。
<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>
Thanks in advance.
提前致谢。
采纳答案by Vivek Chandra
Try this.. hope this is what you are trying to do..
试试这个..希望这就是你想要做的..
<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>
回答by ShankarSangoli
Looks like you are not adding any content to the div so you won't see anything unless you have some visual styles like border to see it on the screen.
看起来您没有向 div 添加任何内容，因此除非您有一些视觉样式（例如边框）可以在屏幕上看到它，否则您将看不到任何内容。
There are few things to note here
这里有几点需要注意
- If you are setting the height and width inline then specify the unit
also e.g.
px,emetc. - Add some visual styles to make is appear on the screen
- 如果您要设置内联的高度和宽度，则还指定单位，例如
px，em等。 - 添加一些视觉样式使屏幕上出现
