使用 JavaScript 来实现显示和隐藏图片。下面是一个简单的示例,展示如何通过按钮点击来切换图片的可见性。
实现效果:
代码:
#myImage {
display: none;
/* 初始状态为隐藏 */
}
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 = '显示图片'; // 更新按钮文本
}
});
部分代码解析:
document.getElementById('toggleButton')
这个方法用于从 HTML 文档中获取 ID 为 toggleButton 的元素。通常这个元素是一个按钮。addEventListener('click', ...)
addEventListener 方法用于给这个元素添加一个事件监听器。在这个例子中,监听的事件是 'click',即用户点击按钮时触发的事件。() => { ... }
这是一个箭头函数,作为事件处理程序。当按钮被点击时,这个函数内的代码将被执行。 const image = document.getElementById('myImage');
这行代码用于获取 ID 为 myImage 的元素,通常是一个图片。获取到的元素被存储在 image 变量中,方便后续操作。