js图片隐藏和显示效果怎样实现？
发布时间：2022-03-12 13:37:43 所属栏目：语言 来源：互联网
导读：怎样用js实现图片隐藏和显示效果？图片的隐藏和显示效果我们经常能在网站上看到，这个功能也是比较实用的，很多朋友想要知道如何用JavaScript来实现图片隐藏和显示，下面小编就给大家分享一些js实现图片隐藏和显示的代码供大家参考。 点击按钮可以显示和隐藏
|
怎样用js实现图片隐藏和显示效果？图片的隐藏和显示效果我们经常能在网站上看到，这个功能也是比较实用的，很多朋友想要知道如何用JavaScript来实现图片隐藏和显示，下面小编就给大家分享一些js实现图片隐藏和显示的代码供大家参考。 点击按钮可以显示和隐藏图片（默认显示），附上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn">隐藏</button> <br> <img src="img/image01.jfif" id="newGirlFriend"> <script type="text/javascript"> // 1.获取事件源 var obtn = document.getElementById("btn"); var newImg = document.getElementsByTagName("img")[0]; // var isShow = true; //方法2 // 2.绑定事件 obtn.onclick = function (){ // if (isShow) { //方法2 if (obtn.innerHTML === '隐藏') { // 3.事件驱动程序 newImg.style.display = 'none'; obtn.innerHTML = "显示"; // // isShow = false; //方法2 }else { newImg.style.display = 'block'; obtn.innerHTML = "隐藏"; // isShow = true; //方法2 } } </script> </body> </html> （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
