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>Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
