js实现图片显示与隐藏
时间: 2024-10-12 18:06:10 浏览: 6
在JavaScript中,你可以通过操作HTML元素的style属性或者直接修改CSS类来控制图片的显示和隐藏。以下是两种常见的方法:
1. **通过style属性**:
```javascript
var imgElement = document.getElementById('yourImageId'); // 获取图片元素
if (imgElement.style.display === 'none') {
imgElement.style.display = 'block'; // 显示图片
} else {
imgElement.style.display = 'none'; // 隐藏图片
}
```
2. **通过CSS类**:
- 创建一个CSS类,例如`.hidden`,并设置其`display`属性为`none`:
```css
.hidden {
display: none;
}
```
- 然后在JavaScript中添加或移除这个类:
```javascript
imgElement.classList.toggle('hidden'); // 添加或移除.hidden类,以此控制图片显示和隐藏
```