JavaScript動態(tài)創(chuàng)建div屬性和樣式示例代碼
更新時間：2013年10月09日 17:38:08 作者：
動態(tài)創(chuàng)建div屬性和樣式在某些情況下還是比較實用的，下面為大家詳細介紹下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代碼
<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代碼
<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>
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代碼
復制代碼 代碼如下:
<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代碼
復制代碼 代碼如下:
<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>
您可能感興趣的文章:
- javascript 動態(tài)創(chuàng)建表格
- javascript動態(tài)創(chuàng)建及刪除元素的方法
- JavaScript動態(tài)創(chuàng)建link標簽到head里的方法
- JavaScript實現(xiàn)動態(tài)創(chuàng)建CSS樣式規(guī)則方案
- JavaScript與DOM組合動態(tài)創(chuàng)建表格實例
- javascript轉換字符串為dom對象（字符串動態(tài)創(chuàng)建dom）
- javascript 翻頁測試頁(動態(tài)創(chuàng)建標簽并自動翻頁)
- JavaScript 動態(tài)創(chuàng)建VML的方法
- Javascript動態(tài)創(chuàng)建div的方法
- javascript 動態(tài)創(chuàng)建 Option選項
相關文章
控件cloneNode（）方法的使用 實例代碼。2009-07-07
Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法
這篇文章主要介紹了Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法 ,需要的朋友可以參考下2016-06-06
JavaScript實現(xiàn)把數(shù)字轉換成中文
這篇文章主要介紹了JavaScript實現(xiàn)把數(shù)字轉換成中文,本文直接給出實例代碼,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄猨s獲取所有checkbox值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JS實現(xiàn)簡單的圖書館享元模式,以一個圖書館存書借書的例子分析了圖書館享元模式的實現(xiàn)技巧,需要的朋友可以參考下2015-06-06
最近在做一個項目，需要JS時間戳轉成C#里的時間，再把C#里的時間戳轉成JS的時間,就仔細研究了下js與C#進行轉換的注意要點，這里記錄下來，有需要的小伙伴自己拿走。2014-11-11
Javascript在IE和Firefox瀏覽器常見兼容性問題總結
這篇文章主要介紹了Javascript在IE和Firefox瀏覽器常見兼容性問題,結合實例形式總結分析了javascript在IE與Firefox瀏覽器中常見的各種兼容性問題與相應的解決方法,需要的朋友可以參考下2016-08-08
很多朋友都聽說過比特幣和以太幣這樣的加密貨幣，但是只有極少數(shù)人懂得隱藏在它們背后的技術，接下來通過本文給大家介紹用JavaScript來創(chuàng)建一個簡單的區(qū)塊鏈來演示它們的內部究竟是如何工作的，感興趣的朋友一起看看吧2018-03-03
axios請求設置responseType為'blob'或'arraybuffer&apo
這篇文章主要給大家介紹了關于axios請求設置responseType為'blob'或'arraybuffer'下載時如何正確處理返回值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
我們通常在使用cookie的時候一般都只是局限在本站內使用，也就是只在一個域名下使用2011-11-11