js图片显示隐藏 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js图片显示隐藏</title>
 6     <script>
 7         window.onload = function () {
 8             //获取按钮
 9             var btn = document.getElementsByTagName("input")[0];
10             //获取图片
11             var img = document.getElementsByTagName("img")[0];
12             //给按钮添加事件
13             btn.onclick = function () {
14                 //点击按钮隐藏图片 或者显示图片
15                 //改变按钮的文字
16                 //如果是隐藏，就改成显示，如果是显示就改成隐藏
17                 //图片的处理 ：如果按钮文字是显示，图片显示出来，否则隐藏
18                 if (btn.value == "显示"){
19                     btn.value = "隐藏";
20                     img.style.display = "block";
21                 }else {
22                     btn.value = "显示";
23                     img.style.display = "none";
24                 }
25             }
26         }
27     </script>
28 </head>
29 <body>
30     <img src="image/0.jpg"/>
31     <br/>
32     <input type="button" value="隐藏"/>
33 </body>
34 </html>

 

posted @ 2017-08-18 14:37  宋发元  阅读(893)  评论(0)    收藏  举报