摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>changeDIV</title> <style type="text/css"> #box{width: 100p
<!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>
<!-- 用按鈕控制div高度、寬度、顏色、重置、隱藏、顯示 -->
<script type="text/javascript">
var box
window.onload=function () {
box=document.getElementById('box')
}
function aa() {
box.style.height="400px" //改變高度
}
function bb() {
box.style.width="400px" //改變寬度
}
function cc() {
box.style.background="pink" //改變顏色
}
function dd() {
box.style.height="100px"
box.style.width="100px"
box.style.background="red"
}
function ee() {
box.style.display="none"
}
function ff() {
box.style.display="block"
}
</script>
<div id="box"></div>
<input type="button" value="變高" onclick="aa()">
<input type="button" value="變寬" onclick="bb()">
<input type="button" value="變色" onclick="cc()">
<input type="button" value="重置" onclick="dd()">
<input type="button" value="隱藏" onclick="ee()">
<input type="button" value="顯示" onclick="ff()">
</body>
</html>
理解：用document.getElementById('box').style.屬性="屬性值" 結(jié)合各種事件作出對css樣式的更改。這個案例里有用到定義全局變量
本案例是通過ID查找HTML，還有
通過class：document.getElementsByClassName("calss名");
通過標(biāo)簽名(tag name)：document.getElementsByTagName("標(biāo)簽名");
總結(jié)：
1、顯示隱藏利用css的display很巧妙。
2、Data 日期和事件，最深刻的是計數(shù)是從0開始，特別是月份。
3、通過幾個案例簡單了解了，function （） 函數(shù)的用法。
4、這個案例也可以配合很多事件，移動到元素移開元素，等等，課后要把其他未演示的事件，都測一遍。
以下為前面學(xué)的重要知識點(diǎn)：
5、innerHTML可以改變HTMl的內(nèi)容。
6、變量分為全局和局部變量，生存周期（從聲明時開始，局部變量函數(shù)運(yùn)行后刪除，全局變量頁面關(guān)閉刪除）
7、 3個提示框 alert() 警告框 confirm() 確認(rèn)框prompt() 提示框
8、數(shù)組Array，還有數(shù)組下標(biāo)，及數(shù)組操作函數(shù)：合并concat() 排序reverse() sort() 增，刪，改splice() 查slice(起始位置,end)
末尾添加返回長度push() 刪除返回末尾元素pop()
9、類型轉(zhuǎn)化 字符串轉(zhuǎn)數(shù)組 數(shù)組轉(zhuǎn)字符串
10、switch for() while if else 等。
總體感覺和php語法都差不多，都是這些東西，JS是弱語言，在瀏覽器可以直接輸出，交互很方便。收益匪淺，準(zhǔn)備看完這個，在把朱老師講的JS再過一遍，加強(qiáng)加強(qiáng)。
批改老師：滅絕師太批改時間：2018-12-17 09:18:17
老師總結(jié)：是的，js還是很強(qiáng)大的，多學(xué)習(xí)還是很有必要的，繼續(xù)加強(qiáng)吧！