style.display = '' 到底是做什么的？

Question

经过数小时的研究，我发现在HTML中切换页面元素显示最有效的方法之一是执行以下操作：

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

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

简单问题：
style.display = '' 究竟是做什么用的？

它是“重置”原始的显示属性吗？

还是移除了显示属性，这样就使用默认的显示样式？

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

希望能够知道：
有谁知道关于此的任何文档链接吗？

（是的，我已经在 Google 上搜索了这个问题，但我可能没有输入正确的搜索词，因此一直得到完全无关的搜索结果。）

感谢任何建议或链接。

- Shawn Spencer

---

我在这里解释了它（如果有帮助的话）：[https://dev59.com/12w15IYBdhLWcg3whMK_#6557005] - thirtydot

Answer 1

是的，它通过清空内联的"display:none"将元素的显示属性重置为默认值，导致该元素退回到由页面排名CSS规则定义的显示属性。

例如，这是一个ID为"myElement"的<div>示例。

<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":""});

这些代码从内联 style 属性中删除了 display 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/ （不在文章中，在评论部分）

- Jake

---

Jake，非常感谢你的解释和链接。我非常感激。谢谢！ - Shawn Spencer

Answer 2

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

- BoltClock

Answer 3

它会移除display属性的值，以便使用默认值。

它不会重置原始的display属性。

举个例子：

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

并且执行以下操作：

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

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

- Guffa

---

当你说“默认值”时，这是否包括样式表中适用的样式？如果有一个样式表，其中包含#test { display: block; }（或者可能是span { display: block; }），那么它会应用，不是吗？ - nnnnnn

@nnnnnn：没错。同时继承的样式也会应用，只有内联样式受style属性影响。 - Guffa

谢谢你，Guffa，提供的解释和代码示例。你太棒了！ - Shawn Spencer

我的理解是，如果我在CSS文件中将DIV声明为FLEX，然后在JavaScript中使用display:none隐藏它，那么我不能使用display：“”来显示它，因为这会将DIV设置为BLOCK（元素的默认值），而不是所需的FLEX。糟糕。如果我想要高效地隐藏和显示DIV（例如模拟选项卡），我仍然需要在某个地方保存原始的display样式，否则就要使用documentfragment DOM操作（但我找不到如何做的教程）。 - David Spector

Answer 4

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

- Naftali