摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width:100px; heig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
margin:10px 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick="myheight()">
<input type="button" value="变宽" onclick="mywidth()">
<input type="button" value="变色" onclick="mycolor()">
<input type="button" value="重置" onclick="myreset()">
<input type="button" value="隐藏" onclick="mynone()">
<input type="button" value="显示" onclick="mydisplay()">
<script type="text/javascript">
var box;
window.onload=function(){
box = document.getElementById('box')
}
function myheight(){
box.style.height="500px"
}
function mywidth(){
box.style.width="300px"
}
function mycolor(){
box.style.background="black"
}
function myreset(){
box.style.height="100px"
box.style.width="100px"
box.style.background="red"
}
function mynone(){
box.style.display="none"
}
function mydisplay(){
box.style.display="block"
}
</script>
</body>
</html>通过按钮点击事件来完成DIV样式的改变，很有意思。
JS很好玩，也很简单。但是思路要清晰。得多练
批改老师：韦小宝批改时间：2018-11-06 13:36:11
老师总结：是的！js是很好玩！js还可以写出好多小游戏呢！这些东西还是得在强大的基础上来完成！学习好基础是多么的重要！课后记得多多练习！加油吧！
