摘要：要使html元素变化，首先要从dom树中获取该元素，然后通过html事件触发浏览器中的动作。改变元素样式通过dom中的元素对象的style属性+css属性来设置特殊的css属性如background-color，要使用驼峰命名法，改成backgroundColor以下是案例代码<!DOCTYPE html><html><head> <meta c
要使html元素变化，首先要从dom树中获取该元素，然后通过html事件触发浏览器中的动作。改变元素样式通过dom中的元素对象的style属性+css属性来设置
特殊的css属性如background-color，要使用驼峰命名法，改成backgroundColor
以下是案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript控制div的样式</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: orange;margin:50px 90px;}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="changeHeight()">变高</button>
<button onclick="changeWidth()">变宽</button>
<button onclick="changeColor()">变色</button>
<button onclick="reset()">重置</button>
<button onclick="hide()">隐藏</button>
<button onclick="show()">显示</button>
<script type="text/javascript">
var box = document.getElementById('box');
function changeWidth(){
box.style.width = "400px"
}
function changeHeight(){
box.style.height = '400px'
}
function changeColor(){
box.style.backgroundColor = 'purple'
}
function reset(){
box.style.width = '100px'
box.style.height = '100px'
box.style.backgroundColor = 'orange'
}
function hide(){
box.style.display = 'none'
}
function show(){
box.style.display = 'block'
}
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-12 12:49:21
老师总结：完成的不错……备注和笔记都做好，以后的作业还可以当初文档看哦！
