Javascript实现动态创建DIV步骤

本文向大家描述一下如何使用Javascript动态创建DIV，首先看一下原来的CSS样式，然后动态创建DIV，把DIV元素增加到HTML里面，相信本文介绍你会学到很多。

成都创新互联公司不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的成都网站建设、成都做网站质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式全网营销推广需求，让再小的品牌网站设计也能产生价值！

Javascript动态创建DIV

这是原来的CSS样式

 
 
   
  
  .item{float:left;overflow:hidden;margin-left:8px;    
  
  margin-top:10px;width:320px;height:250px;    
  
  background-repeat:no-repeat;    
  
  background-image:url(../images/bgred.jpg)}    
  
  .curve{position:relative;width:320px;height:250px;    
  
  z-index:1;left:75px;top:-40px;}

动态创建DIV代码如下:

 
 
   
  
  for(j=0;j*8  
  
  
{    
  
  varmyDIV=window.frames["displayFrame"]    
  
  .document.createElement("DIV");    
  
  myDIV.setAttribute("id","itemDIV"+j);    
  
  myDIV.style.styleFloat="left";    
  
  myDIV.style.overflow="hidden";    
  
  myDIV.style.marginLeft="8px";    
  
  myDIV.style.marginTop="10px";    
  
  myDIV.style.width="320px";    
  
  myDIV.style.height="250px";    
  
  myDIV.style.backgroundRepeat="no-repeat";    
  
  myDIV.style.backgroundImage="url(image/bgred.jpg)"   
  
  window.frames["displayFrame"].document    
  
  .body.appendChild(myDIV);    
  
  varcurveDIV=window.frames["displayFrame"]    
  
  .document.createElement("DIV");    
  
  curveDIV.setAttribute("id","curveDIV"+j);    
  
  curveDIV.style.position="relative";    
  
  curveDIV.style.zIndex=1;    
  
  curveDIV.style.left="75px";    
  
  curveDIV.style.top="-40px";    
  
  curveDIV.style.width="320px";    
  
  curveDIV.style.height="250px";    
  
  window.frames["displayFrame"].document    
  
  .getElementById("DIVitem"+j).appendChild(curveDIV);    
  
  }

把DIV元素增加到HTML里面。

也可在HTML里面定义一个SPAN

 
 
   
  
  window.frames["displayFrame"].document    
  
  .getElementById("spanId").appendChild(myDIV);    
  
  window.frames["displayFrame"].document    
  
  .body.appendChild(myDIV);

IE和Firefox都支持.

◆另外需要注意的是这个CSS元素

浮动效果:float:left
在IE下代码为:myDIV.style.styleFloat="left";
在Firefox代码为:myDIV.style.cssFloat="left";

其他的诸如这种元素:

在CSS编写中一般是:margin-left:8px，而在动态增加需要去掉-:myDIV.style.marginLeft="8px"。

详细出处参考：http://www.jb51.net/article/15938.htm

【编辑推荐】

CSS中块元素和内联元素的区别
专家提醒小心DIV+CSS网页制作五大误区
详解CSS定位属性Position用法
CSS2.0中page-break-after属性用法
技术前沿 CSS+JavaScript实现页面不同布局的切换

本文题目：Javascript实现动态创建DIV步骤
网站地址：http://www.shufengxianlan.com/qtweb/news48/513598.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容