abstrakt：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box_big{height: 500px;width: 100%;border: 1px solid #ccc;}
#box_sml{height: 200px;width: 200px;margin: auto;background: bisque;}
.box_input{height: 40px;width: 80px;background: pink;color: #fff;
border-radius: 3px;outline: none;border: none;margin: auto;}
</style>
</head>
<body>
<div class="box_big">
<div id="box_sml"></div>
<div style="text-align: center;margin: 20px auto;">
<input type="button" class="box_input" value="變高" onclick="changeHeight()">
<input type="button" class="box_input" value="變寬" onclick="changeWidth()">
<input type="button" class="box_input" value="變色" onclick="changeBgColor()">
<input type="button" class="box_input" value="回復(fù)原狀" onclick="changeReturn()">
<input type="button" class="box_input" value="影藏" onclick="changeNone()">
<input type="button" class="box_input" value="顯示" onclick="changeDisplay()">
</div>
</div>
<!--由于不使用window.onload(),js代碼就必須放在HTML的尾部！-->
<script TYPE="text/javascript">
// var change 變量的作用局不同于PHP
var change = document.getElementById('box_sml');
//window.onload window對(duì)象，頁面加載完畢才生效
// window.onload = function () {
// change = document.getElementById('box_sml');
// }
function changeHeight() {
change.style.height = '300px';
}
function changeWidth() {
change.style.width = '300px';
}
function changeBgColor() {
change.style.background = 'red';
}
function changeReturn() {
change.style.height = '100px';
change.style.width = '100px';
change.style.background = 'pink';
}
function changeNone() {
change.style.display = 'none';
}
function changeDisplay() {
change.style.display = 'block';
}
</script>
</body>
</html>
Korrigierender Lehrer：查無此人Korrekturzeit：2019-03-26 09:40:35
Zusammenfassung des Lehrers：完成的不錯(cuò)。js就是可以讓頁面動(dòng)起來，只要你代碼寫的好。繼續(xù)加油