Javascript 如何在 CSS 规则中显示具有 display: none 的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4070638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show an element that has display: none in a CSS rule?
提问by katura
I have a really simple external css stylesheet that has the following :
我有一个非常简单的外部 css 样式表，它具有以下内容：
div.hideBox {
display:none;
}
So when the html page loads, the div with that class attribute 'hideBox' will not show on the page, which is what I want. But I the box to show/appear when a user clicks on a button on that same page. I tried to use the onclick event to do this, but the div won't show.
因此，当 html 页面加载时，具有该类属性 'hideBox' 的 div 将不会显示在页面上，这正是我想要的。但是当用户单击同一页面上的按钮时，我会显示/出现框。我尝试使用 onclick 事件来执行此操作，但 div 不会显示。
So for example, the code would be :
例如，代码将是：
<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()">
What's strange is that a setup similar to this works when I use visibility:hidden; position:absolute;and I can use a JavaScript function to show the <div>.
奇怪的是，当我使用时，类似于此的设置有效，visibility:hidden; position:absolute;并且我可以使用 JavaScript 函数来显示<div>.
What am I doing wrong here?
我在这里做错了什么？
回答by Matt Ball
Because setting the div's displaystyle property to ""doesn't change anything in the CSS rule itself. That basically just creates an "empty," inlineCSS rule, which has no effect beyond clearing the same property on that element.
因为将div的displaystyle 属性设置为""不会更改 CSS 规则本身的任何内容。这基本上只是创建了一个“空的”内联CSS 规则，除了清除该元素上的相同属性之外没有任何影响。
You need to set it to something that hasa value:
您需要将其设置为具有值的内容：
document.getElementById('mybox').style.display = "block";
What you're doing wouldwork if you were replacing an inlinestyle on the div, like this:
如果您要替换div 上的内联样式，您正在做的事情会起作用，如下所示：
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";
回答by Galen
document.getElementById('mybox').style.display = "block";
回答by Kobby
try setting the display to block in your javascript instead of a blank value.
尝试将显示设置为阻止您的 javascript 而不是空白值。
回答by BerggreenDK
I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.
我可以看到您想为此编写自己的简短 javascript，但是您是否考虑过使用框架进行 HTML 操作？jQuery 是我执行此类任务的首选工具，尽管它对您当前的问题来说太过分了，因为它具有许多额外的功能。
