通过按钮执行对应操作完成javascript检测
程序员文章站
2022-03-26 14:09:57
通过DOM可以实现JavaScript去操作HTML元素和CSS样式，完成简单的动态操作，当点击相应按钮，执行相应操作，为按钮添加相应事件//定义"改变颜色"的函数//定义"改变宽高"的函数//定义"隐藏内容"的函数 //定义"显示内容"的函数//定义"取消设置"的函数 ......
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>