用display实现点击按钮后div标签2秒自动隐藏。用display实现点击按钮后div标签2秒自动隐藏。
时间: 2024-04-08 20:34:32 浏览: 18
您可以使用以下JavaScript代码来实现点击按钮后div标签2秒自动隐藏:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hide Div on Button Click</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button onclick="hideDiv()">隐藏</button>
<script>
function hideDiv() {
var myDiv = document.getElementById("myDiv");
myDiv.style.display = "none";
setTimeout(function() {
myDiv.style.display = "block";
}, 2000);
}
</script>
</body>
</html>
```
上述代码中,我们给按钮添加了一个`onclick`事件,当按钮被点击时,`hideDiv()`函数会被调用。在该函数中,我们首先获取到id为`myDiv`的元素,然后将其`display`属性设置为`"none"`,从而隐藏该div标签。接着,我们使用`setTimeout`函数设置一个定时器,延迟2秒后,将div标签的`display`属性重新设置为`"block"`,使其重新显示出来。
这样,点击按钮后,div标签会在2秒后自动隐藏并重新显示。