码迷,mamicode.com
首页 > 编程语言 > 详细

通过按钮执行对应操作完成javascript检测

时间:2020-03-17 23:46:24      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:element   head   doc   基础语法   内置对象   one   spl   NPU   document   

 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>

通过按钮执行对应操作完成javascript检测

标签:element   head   doc   基础语法   内置对象   one   spl   NPU   document   

原文地址:https://www.cnblogs.com/dhnblog/p/12514484.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!