摘要:<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> &
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>changeDIV</title> <style style="text/css"> #box{height: 100px;width: 100px;background-color: red;margin:20px 90px;} </style> </head> <body> <script style="text/javascript"> var box window.onload=function(){ box=document.getElementById("box") } function heighten(){ box.style.height="400px"//變高 } function widen(){ box.style.width="400px"//變高 } function discolor(){ box.style.backgroundColor="pink"//變色 } function reset(){ box.style.height="100px" box.style.width="100px" box.style.backgroundColor="red" } function hide(){ box.style.display="none"//顯示 } function show(){ box.style.display="block"//隱藏 } </script> <div id="box"></div> <input type="button" value="變寬" onclick="heighten()"> <input type="button" value="變高" onclick="widen()"> <input type="button" value="變色" onclick="discolor()"> <input type="button" value="重置" onclick="reset()"> <input type="button" value="隱藏" onclick="hide()"> <input type="button" value="顯示" onclick="show()"> 總結(jié): 選擇器的使用 全局變量的定義:window.load() HTML DOM 改變css樣式:語法document.getElementById().style.屬性="屬性值" 屬性帶 - 的 使用駝峰寫法 display屬性的使用 onclick事件 問題: document.getElementById() 括號內(nèi)部 老師講課的時候有時單引號,又時雙引號,但并不影響結(jié)果, 我想問的是 是不是可以隨便用,還有給數(shù)組元素賦值的時候也是這樣 </body> </html>
批改老師:天蓬老師批改時間:2018-12-07 23:33:12
老師總結(jié):將大量的事件寫到標簽中,不是一個好方案, 不過現(xiàn)階段是可行的