JavaScript事件编程入门案例和对对象属性的遍历

JavaScript是基于时间驱动机制的，所以说很多很多方法也就是function是可以监听事件或者他的返回值然后对他的

返回值或者方法进行反应，这就是事件驱动机制。下面我们以一个例子来说明，这个例子是在界面画一个div然后根据两

个按钮来实现对这个div的背景颜色进行调整，但是我做这个东西的时候很悲催的遇见了一个问题，就是无论怎么调试都

无法在内部CSS也就是style的情况下改变他的背景颜色，最后发现原来在js 里面背景颜色不是bg-color而是bgColor，真

是恶心。

请看例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function test(eventObj){ var div = document.getElementById("div1"); if(eventObj.value=="黑色"){ div.style.backgroundColor="black"; }else{ div.style.backgroundColor="red"; } /* var m = div.style; for(var o in m) window.alert(o);*/ } </script> </head> <body> <div id="div1" style="width:400px;height:500px;background-color:red;"></div> <input type="button" value="黑色" onclick="test(this);"/> <input type="button" value="红色" onclick="test(this);"/> </body> </html>

注释的那个部分就是对style对象的所有属性进行的一个遍历，这个方法非常好用，因为很多对象你不方便去找文档

，所以通过这个形式是非常方便完成的，当然了，我就是通过这个方式完成了这个恶心的bg-color，真是无语。标记

一下。防止以后忘了！！！

posted on 2012-04-08 20:43 sp2012 阅读(169) 评论(0) 编辑收藏举报