1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>編程挑戰(zhàn)</title> 6 <style type="text/css"> 7 body{ 8 font-size: 12px; 9 } 10 ul{ 11 list-style-type: decimal; 12 } 13 #text{ 14 width: 400px; 15 height: 200px; 16 border: 1px solid #ccc; 17 padding: 5px; 18 line-height: 24px; 19 text-align: justify; 20 } 21 #con{ 22 text-indent: 2em; 23 } 24 </style> 25 </head> 26 <body> 27 <h2 id="con">JavaScript課程</h2> 28 <div id="text"> 29 <h3>JavaScript為網(wǎng)頁(yè)添加動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互的功能。</h3> 30 <ul> 31 <li>JavaScript入門篇,讓不懂JS的你,快速了解JS。</li> 32 <li>JavaScript進(jìn)階篇,讓你掌握J(rèn)S的基礎(chǔ)語(yǔ)法、函數(shù)、數(shù)組、事件、內(nèi)置對(duì)象、BOM瀏覽器、DOM操作</li> 33 <li>學(xué)完以上兩門基礎(chǔ)課后,在深入學(xué)習(xí)JavaScript的變量作用域、事件、對(duì)象、運(yùn)動(dòng)、cookie、正則表達(dá)式、ajax等課程</li> 34 </ul> 35 </div> 36 <!--當(dāng)點(diǎn)擊相應(yīng)按鈕,執(zhí)行相應(yīng)操作,為按鈕添加相應(yīng)事件--> 37 <form action=""> 38 <input type="button" name="" value="改變 onclick='myceshi1()'/> 39 <input type="button" name="" value="改變寬高" onclick='myceshi2()'/> 40 <input type="button" name="" value="隱藏內(nèi)容" onclick='myceshi3()'/> 41 <input type="button" name="" value="顯示內(nèi)容" onclick='myceshi4()'/> 42 <input type="button" name="" value="取消設(shè)置" onclick='myceshi5()'/> 43 </form> 44 </body> 45 </html>
通過DOM可以實(shí)現(xiàn)JavaScript去操作HTML元素和CSS樣式,完成簡(jiǎn)單的動(dòng)態(tài)操作,當(dāng)點(diǎn)擊相應(yīng)按鈕,執(zhí)行相應(yīng)操作,為按鈕添加相應(yīng)事件//定義"改變
聯(lián)系客服