快捷導(dǎo)航

JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼

更新時(shí)間：2013年10月09日 17:38:08 作者：

動(dòng)態(tài)創(chuàng)建div屬性和樣式在某些情況下還是比較實(shí)用的，下面為大家詳細(xì)介紹下js中div屬性和樣式的動(dòng)態(tài)創(chuàng)建，感興趣的朋友可以參考下

1.創(chuàng)建div元素：

Javascript代碼

 
<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script> 

<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
divFileitem.appendChild(divName); <!-- no "document" if not body--> 
} 
</script> 

2.創(chuàng)建div的屬性：

Javascript代碼

復(fù)制代碼代碼如下:

 
<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.title="thisisanewdiv."; 
createDiv.id="newDivId"; 
createDiv.class="newDivClass"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script> 

<scripttypescripttype="text/javascript"> 
functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.title="thisisanewdiv."; 
createDiv.id="newDivId"; 
createDiv.class="newDivClass"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
<!--Directly use 2 CSS class styles--> 
createDiv.className = "name file_col"; 
} 
</script> 

3.創(chuàng)建div的樣式：

Javascript代碼

復(fù)制代碼代碼如下:

 
<scripttypescripttype="text/javascript"> 

functioncreateElement(){ 
varcreateDiv=document.createElement("div"); 
createDiv.style.background="pink"; 
createDiv.style.border="1pxsolidred"; 
createDiv.style.width="50px"; 
createDiv.style.height="50px"; 
createDiv.innerHTML="Testcreateadivelement!"; 
document.body.appendChild(createDiv); 
} 
</script> 

您可能感興趣的文章:

相關(guān)文章

javascript cloneNode()方法的使用
控件cloneNode（）方法的使用實(shí)例代碼。
2009-07-07
Ext JS動(dòng)態(tài)加載JavaScript創(chuàng)建窗體的方法
這篇文章主要介紹了Ext JS動(dòng)態(tài)加載JavaScript創(chuàng)建窗體的方法 ,需要的朋友可以參考下
2016-06-06
JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文
這篇文章主要介紹了JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文,本文直接給出實(shí)例代碼,需要的朋友可以參考下
2015-06-06
js獲取所有checkbox的值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s獲取所有checkbox值的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JS實(shí)現(xiàn)簡(jiǎn)單的圖書館享元模式實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的圖書館享元模式,以一個(gè)圖書館存書借書的例子分析了圖書館享元模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-06-06
js與C#進(jìn)行時(shí)間戳轉(zhuǎn)換
最近在做一個(gè)項(xiàng)目，需要JS時(shí)間戳轉(zhuǎn)成C#里的時(shí)間，再把C#里的時(shí)間戳轉(zhuǎn)成JS的時(shí)間,就仔細(xì)研究了下js與C#進(jìn)行轉(zhuǎn)換的注意要點(diǎn)，這里記錄下來，有需要的小伙伴自己拿走。
2014-11-11
Javascript在IE和Firefox瀏覽器常見兼容性問題總結(jié)
這篇文章主要介紹了Javascript在IE和Firefox瀏覽器常見兼容性問題,結(jié)合實(shí)例形式總結(jié)分析了javascript在IE與Firefox瀏覽器中常見的各種兼容性問題與相應(yīng)的解決方法,需要的朋友可以參考下
2016-08-08
JavaScript實(shí)現(xiàn)區(qū)塊鏈
很多朋友都聽說過比特幣和以太幣這樣的加密貨幣，但是只有極少數(shù)人懂得隱藏在它們背后的技術(shù)，接下來通過本文給大家介紹用JavaScript來創(chuàng)建一個(gè)簡(jiǎn)單的區(qū)塊鏈來演示它們的內(nèi)部究竟是如何工作的，感興趣的朋友一起看看吧
2018-03-03
axios請(qǐng)求設(shè)置responseType為'blob'或'arraybuffer&apo
這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求設(shè)置responseType為'blob'或'arraybuffer'下載時(shí)如何正確處理返回值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
關(guān)于二級(jí)域名下使用一級(jí)域名下的COOKIE的問題
我們通常在使用cookie的時(shí)候一般都只是局限在本站內(nèi)使用，也就是只在一個(gè)域名下使用
2011-11-11