js按钮实现图片显示与隐藏
时间: 2024-10-12 14:06:13 浏览: 10
在JavaScript中,你可以通过给图片添加点击事件监听器来实现在点击按钮时图片的显示和隐藏。下面是一个简单的示例:
HTML部分:
```html
<button id="toggleButton">点击切换图片</button>
<img id="myImage" src="hidden-image.jpg" style="display:none;">
```
CSS部分(可选,用于美化或隐藏默认样式):
```css
#myImage {
width: 200px;
height: 200px;
}
```
JavaScript部分:
```javascript
document.getElementById("toggleButton").addEventListener("click", function() {
var img = document.getElementById("myImage");
if (img.style.display === "none") {
img.style.display = "block";
this.textContent = "点击隐藏图片";
} else {
img.style.display = "none";
this.textContent = "点击显示图片";
}
});
```
在这个例子中,当用户点击`toggleButton`按钮时,它会切换`myImage`图片的显示状态。如果图片当前隐藏(`display: none;`),则显示图片并更新文本;如果图片可见,则隐藏图片并更新文本。