abstract：這節(jié)課主要復(fù)習(xí)了前面所學(xué)的知識有：js用id名稱綁定元素；document.getElementById("box")函數(shù)的聲明；function (){}js控制css樣式；js綁定的元素.style.css樣式=“屬性值”事件驅(qū)動函數(shù)；onclick=“函數(shù)名+()”練習(xí)效果：代碼：<!DOCTYPE html> <html> <he
這節(jié)課主要復(fù)習(xí)了前面所學(xué)的知識有：
js用id名稱綁定元素；document.getElementById("box")
函數(shù)的聲明；function (){}
js控制css樣式；js綁定的元素.style.css樣式=“屬性值”
事件驅(qū)動函數(shù)；onclick=“函數(shù)名+()”
練習(xí)效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
transition: 0.5s;
}
input {
display: block;
border: 2px solid green;
}
#btn {
float: left;
}
</style>
</head>
<body>
<div id="btn">
<input type="button" value="變寬" onclick="wit()" />
<input type="button" value="變高" onclick="hei()" />
<input type="button" value="變圓" onclick="rad()" />
<input type="button" value="變藍" onclick="cor()" />
<input type="button" value="隱藏" onclick="hid()" />
<input type="button" value="顯示" onclick="dis()" />
<input type="button" value="重置" onclick="set()" />
</div>
<div id="box"></div>
<script>
var obox;
window.onload = function() {
obox = document.getElementById("box");
};
function wit() {
obox.style.width = "300px"; //寬度變?yōu)?00px；
}
function hei() {
obox.style.height = "300px"; //高度變?yōu)?00px；
}
function rad() {
obox.style.borderRadius = "50%"; //寬度變?yōu)?00px；
}
function cor() {
obox.style.background = "blue"; //寬度變?yōu)?00px；
}
function hid() {
obox.style.display = "none"; //寬度變?yōu)?00px；
}
function dis() {
obox.style.display = "block"; //寬度變?yōu)?00px；
}
function set() {
//重置所有屬性
obox.style.display = "block";
obox.style.width = "200px";
obox.style.height = "200px";
obox.style.background = "red";
obox.style.borderRadius = "0";
}
</script>
</body>
</html>
Correcting teacher：滅絕師太Correction time：2018-12-03 15:54:16
Teacher's summary：除了樣式不好看，其他的完成的不錯，繼續(xù)加油，問題也可以反饋在作業(yè)中……