标签：
javascript如何动态设置div的样式:
有时候需要根据需要动态设置div的样式，当然对于稍有经验的javascript开发者来说，这一切都是那么的简单，但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关，下面就通过实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>动态设置div的样式-蚂蚁部落</title> <style type="text/css"> div{ width:50px; height:50px; background:red; margin-top:10px; } .bg{ background-color:blue; } </style> <script type="text/javascript"> window.onload=function(){ var firstDiv=document.getElementById("firstDiv"); var secondDiv=document.getElementById("secondDiv"); var first=document.getElementById("first"); var second=document.getElementById("second"); first.onclick=function(){ firstDiv.style.backgroundColor="green"; } second.onclick=function(){ secondDiv.className="bg"; } } </script> </head> <body> <div id="firstDiv"></div> <div id="secondDiv"></div> <input type="button" value="使用style方式" id="first" /> <input type="button" value="使用className方式" id="second" /> </body> </html>
以上代码实现了我们的要求，不过是用了两种方法，一种是style方式，一种是className方式。
特别注意:
1.使用style时，像background-color这种符合单词属性要使用驼峰写法（第二个单词首字母大写），写成backgroundColo这种形式。
2.使用className时，属性值是class样式名称，但是前面不能加点(.)。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8322
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5077563.html
