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

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sp2012/archive/2012/04/08/2465718.html

文章标签：

#javascript #ViewUI

本文探讨了JavaScript的事件驱动机制，通过实例展示了如何使用事件驱动调整页面元素的背景颜色。特别关注了在内部CSS中改变背景颜色时遇到的问题及解决方案，即背景颜色属性名为`bgColor`而非`bg-color`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，真是无语。标记

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

转载于:https://www.cnblogs.com/sp2012/archive/2012/04/08/2465718.html