用btn1.onclick = function() 实现点击button按钮后,将已经设置display=none的div显示出来
时间: 2024-03-07 15:47:50 浏览: 54
onclick事件实现div的隐藏和显示
可以使用 btn1.onclick 函数来实现点击按钮后将已经设置了 `display:none` 样式的 div 显示出来。具体实现方式如下:
HTML 代码:
```html
<button id="btn1">点击显示 div</button>
<div id="myDiv" style="display:none;">这是一个隐藏的 div。</div>
```
JavaScript 代码:
```javascript
var btn1 = document.querySelector('#btn1');
var myDiv = document.querySelector('#myDiv');
btn1.onclick = function() {
myDiv.style.display = 'block';
}
```
这段代码中,我们首先使用 `document.querySelector` 方法获取到 id 分别为 `btn1` 和 `myDiv` 的元素。然后,我们将 `btn1` 元素的 `onclick` 事件设置为一个匿名函数,当用户点击该按钮时,该函数会将 `myDiv` 元素的 `display` 样式值设置为 `block`,从而使其显示出来。
阅读全文