目录结构：
代码：
<!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>
样式：
