显示和隐藏图片【JavaScript】
使用 JavaScript 来实现显示和隐藏图片。下面是一个简单的示例，展示如何通过按钮点击来切换图片的可见性。
实现效果:
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示和隐藏图片</title><style>#myImage {display: none;/* 初始状态为隐藏 */}</style></head><body><button id="toggleButton">显示图片</button><img id="myImage" src="./image/image1.jpg" alt="示例图片"><script>document.getElementById('toggleButton').addEventListener('click', function() {const image = document.getElementById('myImage');//使用 window.getComputedStyle(image).display 来获取图片的实际显示状态const currentDisplay = window.getComputedStyle(image).display;if (currentDisplay === 'none') {image.style.display = 'block'; // 显示图片this.textContent = '隐藏图片'; // 更新按钮文本} else {image.style.display = 'none'; // 隐藏图片this.textContent = '显示图片'; // 更新按钮文本}});</script></body>
</html>部分代码解析：
document.getElementById('toggleButton')- 这个方法用于从 HTML 文档中获取 ID 为
toggleButton的元素。通常这个元素是一个按钮。
addEventListener('click', ...)addEventListener方法用于给这个元素添加一个事件监听器。在这个例子中，监听的事件是 'click'，即用户点击按钮时触发的事件。
() => { ... }- 这是一个箭头函数，作为事件处理程序。当按钮被点击时，这个函数内的代码将被执行。
const image = document.getElementById('myImage');- 这行代码用于获取 ID 为
myImage的元素，通常是一个图片。获取到的元素被存储在image变量中，方便后续操作。