原生js实现点击按钮显示/隐藏图片

目录结构：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示和隐藏图片</title>
</head>
<body><button id="btn" style="margin-left: 230px;">隐藏</button>
</br><img style="margin-top: 10px;" src="./images/img01.jpg" width="500px" height="300px"> <script>// 1.获取事件源var btn = document.getElementById("btn");var img = document.getElementsByTagName("img")[0];// var isShow = true;// 2.绑定事件btn.onclick = function() {// 3. 事件驱动程序if(btn.innerHTML === "隐藏"){img.style.display = "none";btn.innerHTML = "显示";// isShow = false;} else {img.style.display = "block";btn.innerHTML = "隐藏";// isShow = true;}}</script>
</body>
</html>

样式：

原生js实现点击按钮显示/隐藏图片相关推荐

原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
如何在网页点击按钮显示的图片
<template><div><button @click="getData">大力出奇迹</butt ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
html输入密码自动隐藏,原生js实现密码输入框值的显示隐藏
本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下直接贴上代码 password intput demo body{ margin:0px; background-co ...
js脚本点击按钮显示文字_JSBOX脚本聊天神器
聊天神器是一个基于JSBox的脚本 JSBox 是一个可以用来运行 JavaScript 脚本的 iOS 应用,你可以通过他来执行标准的 JavaScript 脚本这种执行不是指跑在浏览器上,而是执 ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
使用原生js实现点击按钮展示不同状态内容
话不多说直接上预览图和代码吧,图片可以自己找一些素材贴上去就行了 <!doctype html> <html> <head> <meta charset=&q ...
点击按钮显示隐藏的表格
需求描述:进入页面的时候,点击添加按钮,已添加列表才展示出来解决思路:对添加按钮加个监听,改变列表隐藏为显示代码: //html代码<div class="row" id ...
JS实现点击随机显示大小图片（星星）
对于JS一直心存敬畏,今天再次利用一点时间做一个简单的小Demo来练习JavaScript,愿正在努力的你更幸运! 关键代码已经作了注释,就不再赘述了! <!DOCTYPE html> & ...

原生js实现点击按钮显示/隐藏图片

目录结构：

代码：

原生js实现点击按钮显示/隐藏图片相关推荐

最新文章

热门文章