这是原来的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 <str.length; j++) { var mydiv = 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); var curvediv =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"; 关于大小写敏感问题没有仔细研究.

　　推荐阅读

　　Javascript模拟scroll滚动效果脚本第1/2页

Insert title here .category_list{width:200px;border:solid 1px #666666;height:300px;position:relative;} #category_list{list-style:none;margin:0;padding:0;padding-left:20px;overflow:hid>>>详细阅读

本文标题：Js动态创建div

地址：http://www.17bianji.com/kaifa2/JS/29390.html

 1/2    1