摘要：通過定義函數(shù)，用戶觸發(fā)這個事件改變div狀態(tài)，可以動態(tài)修改css中已有的屬性，可以延伸各種用戶出發(fā)的事件，與用戶交互等,理解并不好?？窗噶?lt;!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style ty
通過定義函數(shù)，用戶觸發(fā)這個事件改變div狀態(tài)，可以動態(tài)修改css中已有的屬性，可以延伸各種用戶出發(fā)的事件，與用戶交互等,理解并不好?？窗噶?/p>
<!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
老師總結(jié)：事件驅(qū)動,是現(xiàn)代異步交互的基礎(chǔ) , 非常 重要