快捷導(dǎo)航

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

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

動態(tài)創(chuàng)建div屬性和樣式在某些情況下還是比較實(shí)用的，下面為大家詳細(xì)介紹下js中div屬性和樣式的動態(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動態(tài)加載JavaScript創(chuàng)建窗體的方法
這篇文章主要介紹了Ext JS動態(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的值的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s獲取所有checkbox值的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS實(shí)現(xiàn)簡單的圖書館享元模式實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的圖書館享元模式,以一個圖書館存書借書的例子分析了圖書館享元模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-06-06
js與C#進(jìn)行時間戳轉(zhuǎn)換
最近在做一個項目，需要JS時間戳轉(zhuǎn)成C#里的時間，再把C#里的時間戳轉(zhuǎn)成JS的時間,就仔細(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)建一個簡單的區(qū)塊鏈來演示它們的內(nèi)部究竟是如何工作的，感興趣的朋友一起看看吧
2018-03-03
axios請求設(shè)置responseType為'blob'或'arraybuffer&apo
這篇文章主要給大家介紹了關(guān)于axios請求設(shè)置responseType為'blob'或'arraybuffer'下載時如何正確處理返回值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
關(guān)于二級域名下使用一級域名下的COOKIE的問題
我們通常在使用cookie的時候一般都只是局限在本站內(nèi)使用，也就是只在一個域名下使用
2011-11-11