用事件传参写一个不同按钮控制图片显示与隐藏
时间: 2024-09-15 14:14:05 浏览: 9
在JavaScript中,你可以使用HTML中的`<button>`元素配合`addEventListener`方法以及一些CSS来实现在点击不同按钮时控制图片的显示与隐藏。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<img id="myImage" src="default.jpg" class="hidden">
<button id="showButton">显示图片</button>
<button id="hideButton">隐藏图片</button>
<script>
// 获取图片和两个按钮元素
const image = document.getElementById('myImage');
const showBtn = document.getElementById('showButton');
const hideBtn = document.getElementById('hideButton');
// 给每个按钮添加点击事件监听器
showBtn.addEventListener('click', function() {
image.classList.remove('hidden'); // 显示图片
});
hideBtn.addEventListener('click', function() {
image.classList.add('hidden'); // 隐藏图片
});
</script>
</body>
</html>
```
在这个示例中,当点击“显示图片”按钮时,图片会从`.hidden`类中移除,显示出来;而点击“隐藏图片”按钮时,会将图片添加`.hidden`类,使其隐藏。