动态创建DIV [英] creating DIV dynamically
本文介绍了动态创建DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想基于一些计算来动态创建div.我能够动态构建div，但是唯一的问题是它不会动态获取高度和宽度.如果可能的话，请任何人分享他们的观点或代码.
这是我用来参考的脚本.
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.
Here''s the script which i used for your reference.
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:'"+divwidth+"';height:'"+divheight+"';border:solid 1px #c0c0c0;padding: 0.5em;text-align: center;float:left;\"></div>");
//document.body.appendChild(divmain);
$(divmain).append(div);
eh=eh+divheight;
fh=fh+divheight;
id++;
}
document.createElement("<br/>");
document.body.appendChild(divmain);
}
}
</script>
预先感谢.
Thanks in advance.
推荐答案
(divmain).append(div); eh = eh + divheight; fh = fh + divheight; id ++; } 文档 .createElement(" )； 文档 .body.appendChild(divmain); } } </script>
(divmain).append(div); eh=eh+divheight; fh=fh+divheight; id++; } document.createElement("<br/>"); document.body.appendChild(divmain); } } </script>
预先感谢.
Thanks in advance.
您可以设置attribute属性来分配DIV的每个属性，而不是将其附加到字符串中.
You can setAttribute property to assign each property of the DIV rather then appending it in the string.
<style type="text/css">
.divclass
{
background: #F0E68C;
border: solid 1px #c0c0c0;
padding: 0.5em;
text-align: center;
float: left;
}
</style>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/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');
div.setAttribute("class", "divclass");
div.setAttribute("id", id);
div.setAttribute("height", divheight);
div.setAttribute("width", divwidth);
div.innerHTML = id;
(' #divmain' ).append(div); eh = eh + divheight; fh = fh + divheight； id ++; } 文档 .createElement(" )； 文档 .body.appendChild(divmain); } } < / 脚本 > < 正文 =' > < 表单 =" form1" runat >服务器" > < div =" divmain" < > < /form > < /body >
('#divmain').append(div); eh = eh + divheight; fh = fh + divheight; id++; } document.createElement("<br />"); document.body.appendChild(divmain); } } </script> <body onload='javascript:createDiv();'> <form id="form1" runat="server"> <div id="divmain"></div> </form> </body>
这篇关于动态创建DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
