摘要：这节课主要复习了前面所学的知识有：js用id名称绑定元素；document.getElementById("box")函数的声明；function (){}js控制css样式；js绑定的元素.style.css样式=“属性值”事件驱动函数；onclick=“函数名+()”练习效果：代码：<!DOCTYPE html> <html> <he
这节课主要复习了前面所学的知识有：
js用id名称绑定元素；document.getElementById("box")
函数的声明；function (){}
js控制css样式；js绑定的元素.style.css样式=“属性值”
事件驱动函数；onclick=“函数名+()”
练习效果：
代码：
<!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"; //宽度变为300px；
}
function hei() {
obox.style.height = "300px"; //高度变为300px；
}
function rad() {
obox.style.borderRadius = "50%"; //宽度变为300px；
}
function cor() {
obox.style.background = "blue"; //宽度变为300px；
}
function hid() {
obox.style.display = "none"; //宽度变为300px；
}
function dis() {
obox.style.display = "block"; //宽度变为300px；
}
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>
批改老师：灭绝师太批改时间：2018-12-03 15:54:16
老师总结：除了样式不好看，其他的完成的不错，继续加油，问题也可以反馈在作业中……
