abstrakt：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>改變div樣式</title> <style> #box{ w
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改變div樣式</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: lightcoral;
margin: 20px 60px;
transition: 0.6s;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="height()">變高</button>
<button onclick="width()">變寬</button>
<button onclick="color()">變色</button>
<button onclick="circular()">變圓</button>
<button onclick="hide()">隱藏</button>
<button onclick="show()">顯示</button>
<button onclick="resetting()">重置</button>
<script>
var box;
window.onload = function () {
box = document.getElementById('box');
};
function width() {
box.style.width = '600px';
}
function height() {
box.style.height = '600px';
}
function color() {
box.style.backgroundColor = '#ccc';
}
function circular() {
box.style.borderRadius = '50%'
}
function resetting() {
box.style.width = '200px';
box.style.height = '200px';
box.style.display = 'block';
box.style.borderRadius = '0';
box.style.backgroundColor = 'lightcoral';
}
function hide() {
box.style.display = 'none';
}
function show() {
box.style.display = 'block';
}
</script>
</body>
</html>
演示地址 -> http://47.107.64.136/JS/4/
Korrigierender Lehrer：滅絕師太Korrekturzeit：2019-01-17 09:14:48
Zusammenfassung des Lehrers：作業(yè)完成的不錯，除了老師上課案例還可以課外拓展練習