js中控制一个div显示和隐藏
时间: 2023-08-13 12:07:54 浏览: 87
在 JavaScript 中,你可以使用以下方法来控制一个 `<div>` 元素的显示和隐藏:
1. 使用 `style.display` 属性:
- 若要隐藏一个元素,可以将其 `style.display` 属性设置为 `'none'`。
- 若要显示一个元素,可以将其 `style.display` 属性设置为 `'block'`、`'inline'` 或其他适当的值。
以下是一个示例代码:
```javascript
// 获取要控制的 <div> 元素
var myDiv = document.getElementById('myDiv');
// 隐藏 <div>
myDiv.style.display = 'none';
// 显示 <div>
myDiv.style.display = 'block';
```
2. 使用 `classList` 属性:
- 若要隐藏一个元素,可以向其添加一个名为 `'hidden'` 的 CSS 类。
- 若要显示一个元素,可以从其移除 `'hidden'` 类。
以下是一个示例代码:
```javascript
// 获取要控制的 <div> 元素
var myDiv = document.getElementById('myDiv');
// 隐藏 <div>
myDiv.classList.add('hidden');
// 显示 <div>
myDiv.classList.remove('hidden');
```
在这两种方法中,你需要根据具体需求选择适合的方式来控制 `<div>` 元素的显示和隐藏。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)