Javascript实现动态建设DIV步调语言&工具

来源:互联网 / 作者:SKY / 2017-11-17 14:11 / 点击:
你知道怎样行使Javascript建设一个浮动DIV吗?它一样平常用来指导用户下面的操纵与多前提选择,点击一下就可表现,请看本文具体先容。
Tech Neo技能沙龙 | 11月25号,中国站长站,九州云/ZStack与您一路切磋云期间收集界线打点实践

本文向各人描写一下怎样行使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<str.length;j++)  

{  

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"。

阅读延展

1
3