使用 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变量中，方便后续操作。
