JavaScript动态创建div并添加样式
分类:实例代码
JavaScript动态创建div并添加样式属于前端实例代码,有关更多实例代码大家可以查看。
在实际应用中,往往需要动态的创建一个div,并给其添加指定的文本或者样式。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script> var odiv=document.createElement("div"); odiv.id="thediv"; odiv.style.width="100px"; odiv.style.height="100px"; odiv.style.backgroundColor="red"; window.onload=function(){ document.body.appendChild(odiv); } </script> </head> <body> </body> </html>
以上代码可以动态创建一个div,并且设置它的尺寸和背景色,然后添加到body中。
相关阅读:
(1).document.createElement参阅document.createElement()一章节。
(2).appendChild参阅JavaScript appendChild()一章节。
JavaScript动态创建div并添加样式,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态创建div并添加样式就介绍到这了。