JavaScript动态创建div属性和样式

本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。

JavaScript创建div的属性和样式

问题域：

如何由JavaScript创建div节点元素：

◆创建div节点元素的属性；

◆创建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);  
}  
</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);  
}  
</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> 
 

【编辑推荐】

1. Javascript实现动态创建DIV步骤
2. 解析CSS类class及id规范化命名
3. 详解CSS定位属性Position用法
4. CSS2.0中page-break-after属性用法
5. 探究CSS中border:none;与border:0;的区别