摘要：通过定义函数，用户触发这个事件改变div状态，可以动态修改css中已有的属性，可以延伸各种用户出发的事件，与用户交互等,理解并不好。看案列<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style ty
通过定义函数，用户触发这个事件改变div状态，可以动态修改css中已有的属性，可以延伸各种用户出发的事件，与用户交互等,理解并不好。看案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
margin: 20px auto;
}
button{
margin-left: 1%;
}
</style>
<script type="text/javascript">
function width(e){
var w=document.getElementById('div');
w.style.width="500px";
}
function height(e){
var w=document.getElementById('div');
w.style.height="500px";
}
function background(e){
var w=document.getElementById('div');
w.style.background="blue";
}
function reset(e){
var w=document.getElementById('div');
w.style.width="300px";
w.style.height="300px";
w.style.background="red";
}
function none(e){
var w=document.getElementById('div');
w.style.display="none";
}
function block(e){
var w=document.getElementById('div');
w.style.display="block";
}
</script>
</head>
<body>
<div style="background: red;" id="div"></div>
<div>
<button type="button" onclick="width()">变高</button>
<button type="button" onclick="height()">变宽</button>
<button type="button" onclick="background()">变色</button>
<button type="button" onclick="reset()">重置</button>
<button type="button" onclick="none()">隐藏</button>
<button type="button" onclick="block()">显示</button>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-24 09:35:47
老师总结：事件驱动,是现代异步交互的基础 , 非常 重要
