摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<style>
#box{width: 100px;height: 100px;background: black;margin: 20px 80px;display: block;}
</style>
</head>
<body>
<!-- 通过ID来查找： document.getElementById('id名') -->
<!-- 通过class来查找: document.getElementsByClassNanme("clsdd名") -->
<!-- 通过标签名来查找： document.getElementsByTagName("tag名") -->
<!-- 改变html元素内容 试用innerHTML -->
<!-- 改变HTML的属性 -->
<!-- 语法：document.gerElementById("id").属性名称="属性值" -->
<!-- <div id="box" style="background: #ccc;width:100px;height:100px; " onclick="box_1(this)"></div>
<script type="text/javascript">
function box_1(x){
document.getElementById('box').innerHTML='我是innerHTML';
}
</script> -->
<script type="text/javascript">
// function biangao.getElementById(box).style.height = "150px";
// function biangao (){
// getElementById('box').style.height = "150px";
// }
var box;
window.onload=function (){
box = document.getElementById('box');
}
function aa(){
box.style.height="200px";//改变高度
}
function bb(){
box.style.width="200px";//改变宽度
}
function cc(){
box.style.background="red";//改变颜色
}
function dd(){
box.style.height="100px";//改变颜色
box.style.width="100px";//改变颜色
box.style.background="black";//改变颜色
}
function ff(){
box.style.display="none";//隐藏
}
function ee(){
box.style.display="block";//隐藏
}
</script>
<div id="box"></div>
<input type="button" value="变高" id="box1" onclick="aa()">
<input type="button" value="变宽" id="box2" onclick="bb()">
<input type="button" value="变色" id="box3" onclick="cc()">
<input type="button" value="重置" id="box4" onclick="dd()">
<input type="button" value="隐藏" id="box5" onclick="ff()">
<input type="button" value="显示" id="box6" onclick="ee()">
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-11 09:15:54
老师总结：学的比较精细用心,继续保持,课堂案例比较简单,可以运用到实践中试试看
