显示隐藏图片html,JavaScript实现显示和隐藏图片

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

}

}

有两种实现方法，实现情况如下：

这是默认显示界面，点击隐藏后，会这样：

简单的显示和隐藏图片功能就实现啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。