JS练习显示隐藏图像

一、都放在一个文件

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3     <head>
 4         <title>showHidden.html</title>
 5         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <style type="text/css">
 7             #div{
 8                 position:absolute;
 9                 left:500px;
10                 top:100px;
11             }
12         </style>
13         <script type="text/javascript">
14 //            显示
15             function show(){
16                 var imgElement = document.getElementById("zgl");
17                 imgElement.style.visibility = "visible";
18             }
19 //            隐藏
20             function hidden(){
21                 var imgElement = document.getElementById("zgl");
22                 imgElement.style.visibility = "hidden";
23             }
24             window.onload = function(){
25                 var  div3Element = document.getElementById("div3");
26                 var showButtonElement = document.getElementById("showId");
27                 var hiddenButtonElement = document.getElementById("hiddenId");
28                 showButtonElement.onclick = show;
29                 hiddenButtonElement.onclick = hidden;
30             }
31         </script>
32     </head>
33   
34     <body>
35         <div id="div">
36             <div id="div2">
37                 <img src="images/zgl.jpg" id="zgl" />
38             </div>
39             <div id="div3" class="mybutton"  align="center">
40                 <input type="button" id="showId" value="显示" />
41                 <input type="button" id="hiddenId" value="隐藏"/>
42             </div>
43         </div>
44     </body>
45 </html>

二、html,js,css分离

　　a)html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3     <head>
 4         <title>showHidden.html</title>
 5         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <style type="text/css">
 7             @import url(css/showHidden.css);
 8         </style>
 9         <script type="text/javascript" src="js/showHidden.js"></script>
10     </head>
11   
12     <body>
13         <div id="div">
14             <div id="div2">
15                 <img src="images/zgl.jpg" id="zgl" />
16             </div>
17             <div id="div3" class="mybutton"  align="center">
18                 <input type="button" id="showId" value="显示" />
19                 <input type="button" id="hiddenId" value="隐藏"/>
20             </div>
21         </div>
22     </body>
23 </html>

　　b)js

 1 //            显示
 2             function show(){
 3                 var imgElement = document.getElementById("zgl");
 4                 imgElement.style.visibility = "visible";
 5             }
 6 //            隐藏
 7             function hidden(){
 8                 var imgElement = document.getElementById("zgl");
 9                 imgElement.style.visibility = "hidden";
10             }
11             window.onload = function(){
12                 var showButtonElement = document.getElementById("showId");
13                 var hiddenButtonElement = document.getElementById("hiddenId");
14                 showButtonElement.onclick = show;
15                 hiddenButtonElement.onclick = hidden;
16             };

　　c)css

1 #div{
2     position:absolute;
3     left:500px;
4     top:100px;
5 }

　　三、js利用new形式来创建

　　a) html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3     <head>
 4         <title>showHidden.html</title>
 5         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6         <style type="text/css">
 7             @import url(css/showHidden.css);
 8         </style>
 9         <script type="text/javascript" src="js/jQuery.js"></script>
10     </head>
11   
12     <body>
13         <div id="div">
14             <div id="div2">
15                 <img src="images/zgl.jpg" id="zgl" />
16             </div>
17             <div id="div3" class="mybutton"  align="center">
18                 <input type="button" id="showId" value="显示" />
19                 <input type="button" id="hiddenId" value="隐藏"/>
20             </div>
21         </div>
22     </body>
23     <script type="text/javascript">
24         //创建对象    
25          var person = new jQuery();
26         //单击"显示"按钮
27         get("showId").onclick = function(){
28             person.show();
29         }
30         //单击"隐藏"按钮
31         get("hiddenId").onclick = function(){
32             person.hidden();
33         }
34     </script>
35 </html>

　　b) js

 1         //自定义定位函数          
 2           function get(stringID){
 3               var element = document.getElementById(stringID);
 4               if(element!=null){
 5                   return element;
 6               }else{
 7                   return null;
 8               }
 9           }
10           //自定义JS对象
11           function jQuery(){
12               this.show=function(){
13                   //定位到第一个像框
14                   var imgElement = document.images[0];
15                   imgElement.style.visibility="visible"; 
16               }
17               this.hidden=function(){
18                    var imgElement = document.images[0];
19                   imgElement.style.visibility="hidden"; 
20               }
21           }

　　c)css

1 #div{
2     position:absolute;
3     left:500px;
4     top:100px;
5 }