摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>changeDIV</title> <style type="text/css"> #box{width: 100px; height: 100px; bac
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>changeDIV</title>
<style type="text/css">
#box{width: 100px; height: 100px; background: red; margin: 20px 80px;}
</style>
</head>
<body>
<script type="text/javascript">
var box
window.onload=function () {
box=document.getElementsById('box')
}
function ch() {
box.style.height="400px;"//改变高度
}
function cw() {
box.style.width="400px;"//改变宽度
}
function cc() {
box.style.background="pink"//改变颜色
}
function rese() {
box.style.height"100px"
box.style.width="100px;"
box.style.background="red"
}
function yc() {
box.style.display="none;"
}
function xs() {
box.style.display="block;"
}
</script>
<div id="box"></div>
<input type="button" value="变高" onclick="ch()">
<input type="button" value="变宽" onclick="cw()">
<input type="button" value="变色" onclick="cc()">
<input type="button" value="重置" onclick="rese()">
<input type="button" value="隐藏" onclick="yc()">
<input type="button" value="显示" onclick="xs()">
</body>
</html>
批改老师:天蓬老师批改时间:2019-01-02 07:53:12
老师总结:box.style.height="400px;", div是重要,最通用的元素 , 灵活使用极大的简化编程