您好,登錄后才能下訂單哦!
這篇文章主要介紹“Javascript如何動(dòng)態(tài)創(chuàng)建DIV”,在日常操作中,相信很多人在Javascript如何動(dòng)態(tài)創(chuàng)建DIV問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Javascript如何動(dòng)態(tài)創(chuàng)建DIV”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
Javascript動(dòng)態(tài)創(chuàng)建DIV
這是原來(lái)的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;}
動(dòng)態(tài)創(chuàng)建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里面定義一個(gè)SPAN
window.frames["displayFrame"].document .getElementById("spanId").appendChild(myDIV); window.frames["displayFrame"].document .body.appendChild(myDIV);
IE和Firefox都支持.
◆另外需要注意的是這個(gè)CSS元素
浮動(dòng)效果:float:left
在IE下代碼為:myDIV.style.styleFloat="left";
在Firefox代碼為:myDIV.style.cssFloat="left";
其他的諸如這種元素:
在CSS編寫中一般是:margin-left:8px,而在動(dòng)態(tài)增加需要去掉-:myDIV.style.marginLeft="8px"。
到此,關(guān)于“Javascript如何動(dòng)態(tài)創(chuàng)建DIV”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。