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>