通过按钮和JavaScript显示或隐藏div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过按钮和JavaScript显示或隐藏div相关的知识，希望对你有一定的参考价值。
我需要隐藏一个div打开一个网页（显示设置为“无”），但点击按钮必须出现div。我想知道为什么代码工作，直到我将css样式声明到每个div中：如果我将样式块中的css定义到头部（下面注释）并从每个div中删除样式标记，则javascript看起来几乎死亡。
<!DOCTYPE html>
<HTML lang="it">
<HEAD>
<TITLE>Prova visualizzazione div via button</TITLE>
<meta charset="UTF-8" />
<script>
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
}
</script>
<!-- <style type="text/css">
header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}
</style> -->
</HEAD>
<body>
<header id="header" style="width: 100%;
background-color: #22ffff;
height: 40px;">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari" style="width: 49%;
background-color: #ff22ff;
height: auto;
display: none;">
Questo è il div appari
</div>
</body>
</html>答案
element.style只获取内联样式，你要找的是computedStyle
所以你需要使用window.getComputedStyle()
查看代码示例：
function apriMenu() {
var idTag;
idTag = document.getElementById("appari");
var displayStyle = window.getComputedStyle(idTag).display;
if (displayStyle === "none") {
idTag.style.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (displayStyle === "block") {
idTag.style.display = "none";
}
}header {
width: 100%;
background-color: #22ffff;
height: 40px;
}
#appari {
width: 49%;
background-color: #ff22ff;
height: auto;
display: none;
}<header id="header">
Questo è l'header<br />
<div id="side">
<button onClick="javascript:apriMenu();">Clicca</button>
</div>
</header>
<div id="appari">
Questo è il div appari
</div>另一答案
如果没有深入挖掘它，你可以添加一个最后的else语句来显示该元素，如果style.display为空。如果您希望最初显示元素，请使用相反的情况。
function apriMenu() {
var idTag;
idTag = document.getElementById("appari").style;
if (idTag.display == "none") {
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
} else if (idTag.display == "block") {
idTag.display = "none";
}
else{
idTag.display = "block";
idTag.top = document.getElementById("header").style.height + "px";
}
}
另一答案
这是实现同样事情的另一种更简单的方法：http://next.plnkr.co/edit/ZsAKiwxVA3riRx5Y?open=lib%2Fscript.js
function toggleMenu() {
var element = document.getElementById("appari");
element.classList.toggle("showMenu");
}
你基本上只需要打开和关闭一个类来隐藏/显示菜单。我发现使用类这样做很简单。
祝好运！
以上是关于通过按钮和JavaScript显示或隐藏div的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript DOM操作案例点击按钮通过类样式的方式显示跟隐藏div