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>