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代碼
<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代碼
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- javascript 動(dòng)態(tài)創(chuàng)建表格
- javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
- JavaScript動(dòng)態(tài)創(chuàng)建link標(biāo)簽到head里的方法
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案
- JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
- javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
- javascript 翻頁測(cè)試頁(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁)
- JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- javascript 動(dòng)態(tài)創(chuàng)建 Option選項(xiàng)
相關(guān)文章
js+canvas實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決
這篇文章主要介紹了原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法
這篇文章主要介紹了Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js實(shí)現(xiàn)省市級(jí)聯(lián)效果分享
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)省市級(jí)聯(lián)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript?12個(gè)有用的數(shù)組技巧
數(shù)組是Javascript最常見的概念之一,它為我們提供了處理數(shù)據(jù)的許多可能性,熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個(gè)有用的JavaScript數(shù)組技巧,需要的朋友可以參考一下2021-12-12Rollup處理并打包JS文件項(xiàng)目實(shí)例代碼
rollup是一款用來es6模塊打包代碼的構(gòu)建工具(支持css和js打包)。這篇文章主要介紹了Rollup處理并打包JS文件項(xiàng)目實(shí)例,需要的朋友可以參考下2018-05-05詳解JavaScript節(jié)流函數(shù)中的Throttle
函數(shù)節(jié)流,就是對(duì)會(huì)頻繁觸發(fā)的函數(shù)事件做一些限制,讓這些函數(shù)可以在每隔一定的時(shí)間或者每次滿足一定的條件下再觸發(fā)。一般我們會(huì)給他起一個(gè)名字throttle。也就是節(jié)流的意思。一般這樣的函數(shù)有 resize事件、ontouchmove事件等。2016-07-07Javascript模仿淘寶信用評(píng)價(jià)實(shí)例(附源碼)
這篇文章主要介紹了Javascript模仿淘寶信用評(píng)價(jià)功能實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁面元素的相關(guān)技巧,并附帶了完整的實(shí)例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11