Question

在研究了这个问题几个小时之后，我发现切换页面元素显示（以HTML格式）的最有效方法之一就是执行以下操作：

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

简单问题： style.display = ''实际上做了什么？

是否“重置”原始显示属性？

或者是否删除了display属性，从而使用默认的显示样式？

..........................................

很高兴知道：有没有人知道任何关于此类文档的链接？

（是的，我有Google-d这个问题，但我可能没有输入正确的搜索字词，并且不断提出完全不相关的搜索结果。）

感谢您提出任何建议或链接。

Answer 1

是的，它通过消隐内联“display：none”将元素的display属性重置为默认属性，从而导致元素回退到页面排名CSS规则定义的显示属性。

例如，这是<div>，其ID为“myElement”。

<div id="myElement"></div>

默认情况下，<div>的设置为display:block。在我们的样式表中，假设我们指定您的<div>将显示为table：

div#myElement
{
    display:table;
}

加载页面后，<div>显示为table。如果您想使用脚本隐藏此<div>，您可以执行以下任何操作：

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

所有这些都具有相同的效果：向style添加内联<div>属性：

<div id="myElement" style="display:none"></div>

如果您希望再次显示该元素，则其中任何一个都可以使用：

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

这些会从内联display属性中删除style CSS属性：

<div style=""></div>

由于内联样式不再指定display，因此<div>会显示为table，因为这是我们在样式表中添加的内容。 <div> 不会恢复显示为block，因为我们的CSS会覆盖默认设置;消除内联display属性并不会否定我们样式表中的规则。

对于咯咯笑，这是我用来验证答案的Google查询：javascript style display empty string default

......以及提到这一点的几个链接：

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ （不在文章中，但在评论部分）

Answer 2

它将display样式设置为该元素的默认值。对于大多数元素（如果不是全部），默认值不是none。

Answer 3

删除display属性的值，以便使用默认值。

重置原始显示属性。

例如，如果你有这个：

<span id="test" style="display:block;">b</span>

这样做：

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

用于元素的display样式最终为inline，因为这是元素的默认样式，它不会重置为HTML代码中指定的样式。

Answer 4

它将该元素显示的css设置为null，这基本上消除了设置的内容并恢复为默认值。

style.display =''实际上做了什么？

4 个答案: