如何显示具有显示的元素：CSS规则中没有显示元素？ [英] How can I show an element that has display: none in a CSS rule?
问题描述
我有一个非常简单的外部CSS样式表，该样式表具有以下内容：
I have a really simple external css stylesheet that has the following :
div.hideBox {
display:none;
}
因此，在加载html页面时，具有该类属性 hideBox的div不会显示在页面上，这是我想要的。但是我在用户单击同一页面上的按钮时显示/显示的框。我尝试使用onclick事件来执行此操作，但div不会显示。
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.
例如，代码为：
<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()">
奇怪的是，当我使用可见性时，类似于以下设置的设置可以工作：隐; position：absolute; ，然后我可以使用JavaScript函数显示< div> 。
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>.
我在这里做错了什么？
What am I doing wrong here?
推荐答案
因为设置了 div 的 display 样式属性更改为 不会更改CSS规则本身。基本上，这只是创建一个空 内联 CSS规则，除了清除该元素上的相同属性外，没有其他作用。
Because setting the div's display style property to "" doesn't change anything in the CSS rule itself. That basically just creates an "empty," inline CSS rule, which has no effect beyond clearing the same property on that element.
您需要将其设置为具有值的东西：
You need to set it to something that has a value:
document.getElementById('mybox').style.display = "block";
如果您要替换，您在做什么将 > div上的inline 样式，像这样：
What you're doing would work if you were replacing an inline style on the div, like this:
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";
这篇关于如何显示具有显示的元素：CSS规则中没有显示元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
