javascript 设置div 位置 js动态设置div的样式

JavaScript动态创建div属性和样式

maomaozgc

DIV是Html中一个非常重要的属性，那么如何使用JavaScript创建div呢，这里就向大家描述一下使用JavaScript创建div的属性和样式。

AD：

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

JavaScript创建div的属性和样式

问题域：

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

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

◆创建div节点元素的样式；

解决方案：

1.创建div元素：

Javascript代码

1. <scripttypescripttype="text/javascript"> 
2. functioncreateElement(){  
3. varcreateDiv=document.createElement("div");  
4. createDiv.innerHTML="Testcreateadivelement!";  
5. document.body.appendChild(createDiv);  
6. }  
7. </script> 
8.  
9. <scripttypescripttype="text/javascript"> 
10. functioncreateElement(){  
11.  varcreateDiv=document.createElement("div");  
12.  createDiv.innerHTML="Testcreateadivelement!";  
13.  document.body.appendChild(createDiv);  
14. }  
15. </script> 
16.

2.创建div的属性：

Javascript代码

1. <scripttypescripttype="text/javascript"> 
2. functioncreateElement(){  
3. varcreateDiv=document.createElement("div");  
4. createDiv.title="thisisanewdiv.";  
5. ="newDivId";  
6. createDiv.class="newDivClass";  
7. createDiv.innerHTML="Testcreateadivelement!";  
8. document.body.appendChild(createDiv);  
9. }  
10. </script> 
11.  
12. <scripttypescripttype="text/javascript"> 
13. functioncreateElement(){  
14.  varcreateDiv=document.createElement("div");  
15.  createDiv.title="thisisanewdiv.";  
16. ="newDivId";  
17.  createDiv.class="newDivClass";   
18.  createDiv.innerHTML="Testcreateadivelement!";  
19.  document.body.appendChild(createDiv);  
20. }  
21. </script> 
22.

3.创建div的样式：

Javascript代码

1. <scripttypescripttype="text/javascript"> 
2.  
3. functioncreateElement(){  
4. varcreateDiv=document.createElement("div");  
5. createDiv.style.background="pink";  
6. createDiv.style.border="1pxsolidred";  
7. createDiv.style.width="50px";  
8. createDiv.style.height="50px";  
9. createDiv.innerHTML="Testcreateadivelement!";  
10. document.body.appendChild(createDiv);  
11. }  
12. </script>