用按钮切换显示/隐藏div？
用按钮切换显示/隐藏div？
提问于 2010-12-25 03:44:34
希望这是一个简单的问题。我有一个div，我想用按钮将其隐藏/显示
<div id="newpost">回答 5
Stack Overflow用户
发布于 2010-12-25 03:55:16
下面是一种简单的切换Javascript方式：
<script>
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>
<div id="newpost">asdf</div>
<input type="button" value="btn" onclick="toggle();">Stack Overflow用户
发布于 2019-04-25 03:46:11
尝试使用不透明度
div { transition: all 0.4s ease }
.hide { opacity: 0; }<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">
<div id="newpost">Hello</div>
Stack Overflow用户
发布于 2015-01-09 02:44:44
这就是我使用类隐藏和显示内容的方式。将类更改为nothing将显示更改为block，将类更改为'a‘将显示为none。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#777777;
}
block1{
display:block; background-color:black; color:white; padding:20px; margin:20px;
}
block1.a{
display:none; background-color:black; color:white; padding:20px; margin:20px;
}
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4528085
复制相关文章
相似问题