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

最新推荐文章于 2020-08-28 23:31:55 发布

Bird

最新推荐文章于 2020-08-28 23:31:55 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 编程 div button function input

本文链接：https://blog.csdn.net/a352193394/article/details/7438629

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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="黑色" οnclick="test(this);"/>
   <input type="button" value="红色" οnclick="test(this);"/>
  </body>
</html>

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

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

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

Bird

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件编程入门案例和对对象属性的遍历

JavaScript是基于时间驱动机制的，所以说很多很多方法也就是function是可以监听事件或者他的返回值然后对他的返回值或者方法进行反应，这就是事件驱动机制。下面我们以一个例子来说明，这个例子是在界面画一个div然后根据两个按钮来实现对这个div的背景颜色进行调整，但是我做这个东西的时候很悲催的遇见了一个问题，就是无论怎么调试都无法在内部CSS也就是style的情况下改变他的背
复制链接

扫一扫