jquery的show/hide可以 或者jquery中的toggleClass()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击显示或隐藏图片</title> <style> .show{ display: block; } .hidden{ display: none; } </style> </head> <body> <button>change</button> <img class="show" src="https://static.cnblogs.com/images/adminlogo.gif" alt="博客园"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> //jquery 中直接切换className // $('button').click(function(){ // $('img').toggleClass('hidden'); // }) //原生js var btn = document.getElementsByTagName('button')[0]; var img = document.getElementsByTagName('img')[0]; btn.onclick = function(){ if(img.className == "show" ){ img.className = "hiden"; }else{ img.className='show'; } } </script> </body> </html>