javascript - style.display = '' 实际上是做什么的？

Question

在研究这个问题几个小时后，我发现切换页面元素显示(在 HTML 中)的最有效方法之一是执行如下操作:

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

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

简单的问题:style.display = '' 到底做了什么？

它是否“重置”了原来的显示属性？

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

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

很高兴知道: 有谁知道与此相关的任何类型文档的任何链接？

(是的，我用 Google 搜索过这个问题，但我可能没有输入正确的搜索词，并不断得出完全不相关的搜索结果。)

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

Answer 1

是的，它通过清除内联“display: none”将元素的显示属性重置为默认值，从而使元素退回到页面排名 CSS 规则定义的显示属性。

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

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

A <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属性(property)给你<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来自内联的 CSS 属性 style属性:

<div style=""></div>

由于内联样式不再指定 display , <div>返回显示为 table ，因为这就是我们放在样式表中的内容。 <div> 不会恢复显示为 block因为我们的 CSS 覆盖了默认设置；消隐内联 display属性不会否定我们样式表中的规则。

---

咯咯地笑，这是我用来验证我的答案的谷歌查询: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/(不在文章里，在评论区)