JavaScript动态创建div属性和样式示例代码
更新时间：2013年10月09日 17:38:08 作者：
动态创建div属性和样式在某些情况下还是比较实用的，下面为大家详细介绍下js中div属性和样式的动态创建，感兴趣的朋友可以参考下
1.创建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.创建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.创建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.创建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.创建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>
相关文章
控件cloneNode（）方法的使用 实例代码。2009-07-07
这篇文章主要介绍了Ext JS动态加载JavaScript创建窗体的方法 ,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript实现把数字转换成中文,本文直接给出实例代码,需要的朋友可以参考下2015-06-06
下面小编就为大家带来一篇js获取所有checkbox值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JS实现简单的图书馆享元模式,以一个图书馆存书借书的例子分析了图书馆享元模式的实现技巧,需要的朋友可以参考下2015-06-06
最近在做一个项目，需要JS时间戳转成C#里的时间，再把C#里的时间戳转成JS的时间,就仔细研究了下js与C#进行转换的注意要点，这里记录下来，有需要的小伙伴自己拿走。2014-11-11
Javascript在IE和Firefox浏览器常见兼容性问题总结
这篇文章主要介绍了Javascript在IE和Firefox浏览器常见兼容性问题,结合实例形式总结分析了javascript在IE与Firefox浏览器中常见的各种兼容性问题与相应的解决方法,需要的朋友可以参考下2016-08-08
很多朋友都听说过比特币和以太币这样的加密货币，但是只有极少数人懂得隐藏在它们背后的技术，接下来通过本文给大家介绍用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的，感兴趣的朋友一起看看吧2018-03-03
axios请求设置responseType为'blob'或'arraybuffer&apo
这篇文章主要给大家介绍了关于axios请求设置responseType为'blob'或'arraybuffer'下载时如何正确处理返回值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
我们通常在使用cookie的时候一般都只是局限在本站内使用，也就是只在一个域名下使用2011-11-11
最新评论