JavaScript基础知识--鼠标点击事件

Sian · 发表于 2015-8-6 17:12:48

本帖最后由 Sian 于 2015-8-6 17:25 编辑

1、基本思路

1.1 创建三个div，id分别为 one、two、three

1.2 点击id为one的div后，id为one和two的两个div分别改变背景颜色为绿色和蓝色

2、先看点击前与点击后的效果
QQ20150806-1@2x.png

3、页面代码参考：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html><head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background: red;
			margin-bottom: 10px;
		}
	</style>
	<script type="text/javascript">
		function change () {
			var box2 = document.getElementById('two');		// 获取div id = ”two" 的元素
			box1.style.backgroundColor = "green";			// 将div id = "one" 的元素背景颜色改为绿色

			var box1 = document.getElementById('one');		// 获取div id = “one" 的元素
			box2.style.backgroundColor = "blue";			// 将div id = "two" 的元素背景颜色改为蓝色
		}
	</script>
</head>

<html>
<body>
	<div id = "one"></div>
	<div id = "two"></div>
	<div id = "three"></div>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册