JavaScript动态创建div属性和样式


本文向大家介绍一下如何使用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. createDiv.id="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. createDiv.id="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> 
  13.  



标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2