js js创建一个divdiv

&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&&/title&
.wd_picc1{
height:115
padding:5px 21
.wd_pic_pic{
.wd_pic_text12{
text-align:
&script src="builder.js"&&/script&
&script language="javascript"&
function BFImage(arg0, arg1, arg2, arg3){
this.name = arg0;
this.tag = arg1;
this.caption = arg2;
this.priceDesc = arg3;
function showBFImages(arg0, arg1){
var bfwdImageListDiv = document.getElementById(arg0);
bfwdImageListDiv.innerHTML = "";
for(var i=1;i&=bfIL.i++){
bfImage = bfIL[i-1];
if(bfImage.tag==arg1){
wd_picc1 = document.createElement("div");
wd_picc1.setAttribute('class','wd_picc1');
wd_pic_pic = document.createElement("div");
wd_pic_pic.setAttribute('class','wd_pic_pic');
wd_a = document.createElement("a");
wd_a.setAttribute('href',bfImage.name);
wd_a.setAttribute('rel',"lightbox[bafangwang]");
wd_a.setAttribute('title',bfImage.caption);
wd_a.setAttribute('target',"_blank");
wd_img = document.createElement("img");
wd_img.setAttribute('src',bfImage.name);
wd_img.setAttribute('width',"130");
wd_img.setAttribute('height',"90");
wd_a.appendChild(wd_img);
wd_pic_pic.appendChild(wd_a);
wd_picc1.appendChild(wd_pic_pic);
wd_pic_text12 = document.createElement("div");
wd_pic_text12.innerHTML = bfImage.
wd_pic_text12.setAttribute('class','wd_pic_text12');
wd_picc1.appendChild(wd_pic_text12);
wd_pic_text122 = document.createElement("div");
wd_pic_text122.innerHTML = bfImage.priceDesc==''?"&":bfImage.priceD
wd_pic_text122.setAttribute('class','wd_pic_text12');
wd_picc1.appendChild(wd_pic_text122);
bfwdImageListDiv.appendChild(wd_picc1);
document.getElementById("code").value= bfwdImageListDiv.innerHTML;
&a href="javascript:showBFImages('bfwdImageList', 1);"&s1&/a&
&a href="javascript:showBFImages('bfwdImageList', 2);"&s2&/a&
&div id="bfwdImageList" style="width: height: float:"&
&div style="width:100%"&
&textarea id="code" cols="64" rows="8"&&/textarea&
&script language="javascript"&
bfIL = new Array(6);
bfIL[0] = new BFImage("0bdba4e1--ad2a-998bb02cfd0d.jpg", 1, "标题一", "");
bfIL[1] = new BFImage("abee9a0c-cfeb-4e9e-de3f-914d7c53fd39.jpg", 1, "标题二", "");
bfIL[2] = new BFImage("ba3e9a6c-deb7-4418-ab37-90e27c531939.jpg", 1, "标题三", "");
bfIL[3] = new BFImage("0d90e78b-0db2-429b-a1ee-2a28b91b8068.jpg", 2, "标题一2", "");
bfIL[4] = new BFImage("0ac1d905-b15d-47f9-9eb4-034cb9be44a2.jpg", 2, "标题二2", "");
bfIL[5] = new BFImage("0bd2c9e5-a014--56f40f628a87.jpg", 2, "标题三2", "");
//document.getElementById("bfwdImageList").innerHTML= document.getElementById("code").
&/html&
点击s1或s2 让动态生成的div 横排显示(现在ie6显示竖排,ff显示正常)
采纳的答案
OK,经过反复实验,发现你这是碰到了IE的一个渲染问题,除了IE本身是垃圾的问题之外。。你的代码的写法也不是很规范,所以改正过来就可以了。
首先,你只要将
wd_picc1.setAttribute('class','wd_picc1');&&
这句话改成:
wd_picc1.className = "wd_picc1";
这个例子马上就能用。
关于这个问题跟你的代码,还有一些补充:
第一,注意全局变量。如果这个变量是局部的,一定要加上var来定义才行,不然会变成全局变量,会带来很多隐患。比如
wd_picc1 = document.createElement("div");
var wd_picc1 = document.createElement("div");
第二,面向对象的写法,更方面快捷的写法。
wd_picc1.setAttribute('class','wd_picc1'); 可以改成
wd_picc1.className = "wd_picc1";
同理,其他的,& wd_a.setAttribute('href',bfImage.name);也可以改成
wd_a.href=bfImage.当然,还是要注意加上var
关于这个IE的渲染问题,就是因为你的class是采用setAttribute的方式给设定的class,IE可能不认识,所以,你在外面css定义的属性它根本都没生效。
关于这样的问题如何解析,对于IE,你可以用IE Developer Toolbar来查看。类似与firebug
已解决问题
未解决问题Js动态创建div - hateyoucode - 博客园
写写程序,一种成就的感觉
posts - 121, comments - 4, trackbacks - 0, articles - 4
这是原来的CSS样式 .item{float:overflow:margin-left:8margin-top:10width: 320 height: 250background-repeat: no- background-image:url(../images/bgred.jpg)} .curve{position:width:320 height:250 z-index:1; left: 75 top: -40} 动态创建DIV代码如下: for(j = 0;j*8 &str. 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"; 关于大小写敏感问题没有仔细研究.
&script type="text/javascript" defer&function cDiv(){var oDiv=document.createElement("div");oDiv.style.border="1px solid black";oDiv.style.width="100px";oDiv.style.height="100px";oDiv.style.backgroundColor="#E1E1E1";document.body.appendChild(oDiv);}oF.document.write("&script type=\"text/javascript\"&");oF.document.write("function clk(){");oF.document.write("window.top.document.getElementsByTagName(\'button\')[0].click();");oF.document.write("}");oF.document.write("&\/sc"+"ript&");oF.document.write("&button onclick=\"clk()\"&create Div in parent&\/button&");
&/script&&body&&iframe id="oF" frameborder="1"&
&/iframe&&button id="btn" onclick="cDiv()"&create&/button&&/body&
&script&function show(sid){&var hasdiv=document.getElementById("showpic")&if (hasdiv==null)&{&var oDiv=document.createElement("div");&oDiv.id="showpic";&oDiv.style.border="1px solid black";&oDiv.style.marginLeft="300px";&oDiv.style.marginTop="-500px";&oDiv.style.position='absolute';&oDiv.style.fontSize='10pt';&oDiv.style.color='red';&oDiv.style.lineHeight='25px';&oDiv.style.textAlign='right';&oDiv.innerHTML="&img src="+sid+"&&br&&span onclick=closediv() style='cursor:hand'&&关&闭&&/span&"&document.body.appendChild(oDiv);&}&else&{&&hasdiv.innerHTML="&img src="+sid+"&&br&&span onclick=closediv() style='cursor:hand'&&关&闭&&/span&"&}}
function closediv(){&var hasdiv=document.getElementById("showpic")&hasdiv.innerHTML=""}&/script&
&img src="&%=rs_Product("CompHonor")%&" width="149" height="113" border="0" onclick="show('&%=rs_Product("CompHonor")%&')" style="cursor:"&当前位置: >
> JS 动态创建DIV(IE8没有关问题)Google chrome提示:Uncaught TypeError: Illegal invocation
JS 动态创建DIV(IE8没有关问题)Google chrome提示:Uncaught TypeError: Illegal invocation
niuzai888888 & at
JS 动态创建DIV(IE8没问题)Google chrome提示:Uncaught TypeError: Illegal invocation部分代码如下:
提示错误位置为:var&backDiv&=&cDiv("div");
弹出提示Test1没有弹出Test2,想问下这是Google浏览器不支持还是有错误?应该怎么改?谢谢
  function&setChild(div,kid)
&&//可否移动、调整
&&var&isMove&=&document.getElementById("isMove").
&&var&isResize&=&document.getElementById("isResize").
&&var&cDiv&=&document.createE
alert('Test1');
&&var&backDiv&=&cDiv("div");
alert('Test2');
&&backDiv.style.cssText&=&"left:&0&top:&0&width:&100%;&height:&100%;&background-color:&#F5F5F5;";
&&div.appendChild(backDiv);
&&var&topDiv&=&cDiv("div");
&&topDiv.style.cssText&=&"left:&2&top:&2&width:&100%;&height:&30&position:&&background-color:&#FF6699;&vertical-align:&&z-index:&5";
&&if&(isMove)
&&&topDiv.style.cursor&=&"move";
&&&topDiv.setAttribute("onmousedown",&function(){setMove(this)});
&&&topDiv.style.cursor&=&"default";
&&topDiv.innerHTML&=&"&span&style='top:&5&left:5&font-size:&20&font-weight:&&color:𙂔&position:&'&onselectstart='return&false'&聊天&/span$>$;
&&div.appendChild(topDiv);
&&……(省略)
&&var&cDiv&=&document.createE
alert('Test1');
&&var&backDiv&=&cDiv("div");
alert('Test2');
createElement是个方法,
backDiv&=&document.createElement("div");niuzuoquan & &
& & (0)(0)
本问题标题:
本问题地址:
温馨提示:本问题已经关闭,不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&增值电信业务经营许可证湘B2-

我要回帖

更多关于 js创建一个div 的文章

 

随机推荐