如何在CSS规则中显示有display:none的元素?

kat*_*ura 46 html javascript css

我有一个非常简单的外部css样式表,它具有以下内容:

div.hideBox {
    display:none;
}
Run Code Online (Sandbox Code Playgroud)

因此,当加载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()">
Run Code Online (Sandbox Code Playgroud)

奇怪的是,当我使用时,类似于此的设置可以工作visibility:hidden; position:absolute;,我可以使用JavaScript函数来显示<div>.

我在这做错了什么?

Mat*_*all 79

因为将div's displaystyle属性设置为""不会改变CSS规则本身的任何内容.这基本上只是创建一个"空的" 内联 CSS规则,除了清除该元素上的相同属性之外没有任何效果.

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

document.getElementById('mybox').style.display = "block";
Run Code Online (Sandbox Code Playgroud)

如果要替换div上的内联样式,那么您正在做的事情起作用,如下所示:

<div id="myBox" style="display: none;"></div>

document.getElementById('mybox').style.display = "";
Run Code Online (Sandbox Code Playgroud)


Gal*_*len 13

document.getElementById('mybox').style.display = "block";
Run Code Online (Sandbox Code Playgroud)


Kob*_*bby 6

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