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>
