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

After researching this issue for a couple of hours, I found that one of the most efficient ways to toggle a page element's display (in HTML) is to do something like:

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

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

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

Simple question: What does style.display = '' actually do?

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

Does it "reset" the original display property?

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

Or does it remove the display property, thereby using the default style for display?

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

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

Would be nice to know: Does anyone know of any links to any kind of documentation about this?

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

(Yes, I have Google-d this issue, but I'm probably not entering the right search term and keep coming up with completely un-related search results.)

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

Thanks for any suggestions or links.

感谢您的任何建议或链接。

4 个解决方案

#1

Yes, it resets the element's display property to the default by blanking out the inline "display: none", causing the element to fall back on its display property as defined by the page's ranking CSS rules.

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

For example, here's a <div> with the ID of "myElement".

例如，这是一个ID为“myElement”的

。

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

A <div> has a setting of display:block by default. In our style sheet, suppose we specify that your <div> is to be displayed as table:

默认设置为display：block。在我们的样式表中，假设我们指定您的

将显示为表：

div#myElement
{
    display:table;
}

Upon loading your page, the <div> is displayed as table. If you want to hide this <div> with scripting, you might do any of these:

加载页面后，

显示为表格。如果您想使用脚本隐藏此

，您可以执行以下任何操作：

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

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

All of thse have the same effect: adding an inline style property to your <div>:

所有这些都具有相同的效果：向

添加内联样式属性：

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

If you wish to show the element again, any of these would work:

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

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

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

These remove the display CSS property from the inline style property:

这些从内联样式属性中删除显示CSS属性：

<div style=""></div>

Since the inline style no longer specifies a display, the <div> goes back to being displayed as table, since that's what we put in the style sheet. The <div> does not revert to being displayed as block because our CSS overrode that default setting; blanking out the inline display property does not negate the rules in our style sheets.

由于内联样式不再指定显示，因此

将返回显示为表格，因为这是我们在样式表中放置的内容。

不会恢复为显示为块，因为我们的CSS覆盖了默认设置;消隐内联显示属性不会否定我们样式表中的规则。

For giggles, here's the Google query I used for verification of my answer: javascript style display empty string default

对于咯咯笑，这是我用来验证我的答案的Google查询：javascript样式显示空字符串默认值

...and a couple of links where this is mentioned:

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

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/ (not in the article, but in the comments section)

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

#2

It sets the display style to the default value for that element. For most elements if not all, the default value is something other than none.

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

#3

It removes the value for the display property so that the default value is used.

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

It does not reset the original display property.

它不会重置原始显示属性。

If you for example have this:

例如，如果你有这个：

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

And do this:

这样做：

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

the display style used for the element ends up being inline because that's the default for the element, it is not reset back to the style specified in the HTML code.

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

#4

It sets the css for that element's display to null which essentially wipes out what was set and it reverts to its default value.

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

#1