摘要：<!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>
<!-- 通過(guò)ID來(lái)查找： document.getElementById('id名') -->
<!-- 通過(guò)class來(lái)查找: document.getElementsByClassNanme("clsdd名") -->
<!-- 通過(guò)標(biāo)簽名來(lái)查找： document.getElementsByTagName("tag名") -->
<!-- 改變html元素內(nèi)容 試用innerHTML -->
<!-- 改變HTML的屬性 -->
<!-- 語(yǔ)法：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>
批改老師：滅絕師太批改時(shí)間：2019-02-11 09:15:54
老師總結(jié)：學(xué)的比較精細(xì)用心,繼續(xù)保持,課堂案例比較簡(jiǎn)單,可以運(yùn)用到實(shí)踐中試試看