Fatal编程技术网
  • javascript/
  • Javascript 如何在CSS规则中显示具有display:none的元素？

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

javascript css html

Javascript 如何在CSS规则中显示具有display:none的元素？,javascript,css,html,Javascript,Css,Html,我有一个非常简单的外部css样式表，它包含以下内容： div.hideBox { display:none; } 因此，当html页面加载时，带有class属性'hideBox'的div将不会显示在页面上，这就是我想要的。但是，当用户单击同一页面上的按钮时，我会选择要显示/显示的框。我尝试使用onclick事件来完成此操作，但div不会显示 例如，代码是： <script language="javascript"> function showmydiv() { docum

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

div.hideBox {
    display:none;
}
因此，当html页面加载时，带有class属性'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()">


函数showmydiv（）{
document.getElementById（'mybox'）.style.display=“”；
}
一些文本输出
奇怪的是，当我使用
visibility:hidden；位置：绝对位置

我做错了什么

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

document.getElementById('mybox').style.display = "block";
您需要将其设置为具有值的值：

如果替换div上的内联样式，您所做的工作将起作用，如下所示：

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

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


document.getElementById（'mybox'）.style.display=“”；
尝试在javascript中将显示设置为块，而不是空值

我可以看出，您希望为此编写自己的短javascript，但您是否考虑过使用框架进行HTML操作？jQuery是我最喜欢的工具，尽管它有很多额外的功能，对于您当前的问题来说是一个过分的工具

这在所有浏览器中都会发生吗？是的，我在IE、Firefox和Chrome中进行了测试。我相信当您将display设置为“”时，它会返回到原始的显示值（在css中设置）。@Juan:当您将内联
显示
样式设置为
时。”
它只是删除了内联样式。如果我不希望它显示为块，该怎么办？我只需要默认（空）值来重写来自该类的值。@Paul-默认值不是空的，而是“inline”或“block”，具体取决于元素。 
<div id="myBox" style="display: none;"></div>

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