JavaScript之显示和隐藏图片

点击按钮可以显示和隐藏图片（默认显示），附上代码：

<!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) { //方法2if (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>

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

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

简单的显示和隐藏图片功能就实现啦！
觉得有用的话可以给作者鼓励支持一下~你的鼓励就是我不断前行的动力！

JavaScript之显示和隐藏图片相关推荐

显示隐藏图片html,JavaScript实现显示和隐藏图片
JavaScript之显示和隐藏图片,供大家参考,具体内容如下点击按钮可以显示和隐藏图片(默认显示),附上代码: 显示和隐藏图片隐藏 // 1.获取事件源 var obtn = document. ...
html图片的隐藏与显示,Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以 ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...
JavaScript的显示和隐藏
显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...
JavaScript 显示和隐藏图片
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
点击按钮显示和隐藏图片
1.新建一个HTML文件以及css样式文件还有js 2.把css文件以及js引入HTML 3.写入一个div并设置类名 4.在div内写入一个img然后导入图片并给这个img设置类名以及id 5.在d ...
html显示隐藏图片,简单的图片显示与隐藏
今天有个小问题,在iPhone上显示所有图片.但是不可能一次显示全部,只能显示图片的名称列表.需要点击图片名,然后显示图片,再次点击的话,就隐藏图片.一个比较简单的javascript代码,在这里记录 ...
原生js实现点击按钮显示/隐藏图片
目录结构: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JS图片显示与隐藏案例
一.案例需求点击按钮后图片隐藏,同时按钮的文字变为显示,再次点击按钮图会显示,同时按钮的文字变为隐藏. 二.案例分析 1.事件源:按钮(button) 2.事件类型:点击(onclick) 3.事 ...

JavaScript之显示和隐藏图片

JavaScript之显示和隐藏图片

JavaScript之显示和隐藏图片相关推荐

最新文章

热门文章