1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>編程挑戰</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為網頁添加動態效果並實現與用戶交互的功能。</h3> 30 <ul> 31 <li>JavaScript入門篇，讓不懂JS的你，快速了解JS。</li> 32 <li>JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作</li> 33 <li>學完以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程</li> 34 </ul> 35 </div> 36 <!--當點擊相應按鈕，執行相應操作，為按鈕添加相應事件--> 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="隱藏內容" onclick='myceshi3()'/> 41 <input type="button" name="" value="顯示內容" onclick='myceshi4()'/> 42 <input type="button" name="" value="取消設置" onclick='myceshi5()'/> 43 </form> 44 </body> 45 </html>
通過DOM可以實現JavaScript去操作HTML元素和CSS樣式，完成簡單的動態操作，當點擊相應按鈕，執行相應操作，為按鈕添加相應事件//定義"改變顏色"的函數//定義"改變寬高"的函數//定義"隱藏內容"的函數 //定義"顯示內容"的函數//定義"取消設置"的函數
1 <script type="text/javascript"> 2 //定義"改變顏色"的函數 3 function myceshi1(){ 4 var ceshi1=document.getElementById('text'); 5 ceshi1.style.color='red'; 6 } 7 //定義"改變寬高"的函數 8 function myceshi2(){ 9 var ceshi2=document.getElementById('text'); 10 ceshi2.style.width='600px'; 11 ceshi2.style.height='400px'; 12 } 13 //定義"隱藏內容"的函數 14 function myceshi3(){ 15 var ceshi3=document.getElementById('text'); 16 ceshi3.style.display='none'; 17 } 18 //定義"顯示內容"的函數 19 function myceshi4(){ 20 var ceshi4=document.getElementById('text'); 21 ceshi4.style.display='block'; 22 } 23 //定義"取消設置"的函數 24 function myceshi5(){ 25 if(confirm('是否取消設置')) 26 { 27 var ceshi5=document.getElementById('text'); 28 ceshi5.style.width='400px'; 29 ceshi5.style.height='200px'; 30 ceshi5.style.color='#000'; 31 ceshi5.style.border='1px solid #ccc'; 32 ceshi5.style.padding='5px'; 33 ceshi5.style.lineHeight='24px'; 34 ceshi5.style.textAlign='justify'; 35 ceshi5.style.display='block'; 36 } 37 else{ 38 console.log('恭喜你已經成功取消操作'); 39 } 40 } 41 </script>