Question

我有一个非常简单的外部css样式表，其中包含以下内容：

div.hideBox {
    display:none;
}

因此，当加载html页面时，具有该类属性“hideBox”的div将不会显示在页面上，这就是我想要的。但是当用户点击同一页面上的按钮时，我会显示/显示该框。我尝试使用onclick事件来执行此操作，但div不会显示。

例如，代码将是：

<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}

</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">

当我使用visibility:hidden; position:absolute;并且我可以使用JavaScript函数来显示<div>时，类似于此的设置有效，这很奇怪。

我在这里做错了什么？

Answer 1

因为将div的{{1}}样式属性设置为display并不会改变CSS规则本身的任何内容。这基本上只是创建一个“空的”内嵌 CSS规则，除了清除该元素上的相同属性之外没有任何效果。

您需要将其设置为具有值的内容：

""

如果您要替换div上的内嵌样式， 的工作

document.getElementById('mybox').style.display = "block";

Answer 2

document.getElementById('mybox').style.display = "block";

Answer 3

尝试将显示设置为在javascript中阻止而不是空白值。

Answer 4

我可以看到你想为此编写自己的简短javascript，但是你是否考虑过使用Frameworks进行HTML操作？ jQuery是我这个任务的首选工具，虽然它对你当前的问题来说太过分了，因为它有很多额外的功能。

Have a look at jQuery here

如何在CSS规则中显示有display：none的元素？

4 个答案: