Javascript style.display = '' 实际上是做什么的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7420109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does style.display = '' actually do?
提问by Shawn Spencer
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.)
（是的，我有 Google-d 这个问题，但我可能没有输入正确的搜索词，并不断提出完全不相关的搜索结果。）
Thanks for any suggestions or links.
感谢您提供任何建议或链接。
采纳答案by Jake
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 规则定义的 display 属性。
For example, here's a <div>with the ID of "myElement".
例如，这里有一个<div>ID 为“myElement”的元素。
<div id="myElement"></div>
A <div>has a setting of display:blockby default. In our style sheet, suppose we specify that your <div>is to be displayed as table:
A的默认<div>设置为display:block。在我们的样式表中，假设我们指定您<div>将显示为table：
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:
加载页面后，<div>显示为table。如果您想<div>用脚本隐藏它，您可以执行以下任一操作：
// 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 styleproperty to your <div>:
所有这些都具有相同的效果：将内联style属性添加到您的<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 displayCSS property from the inline styleproperty:
这些display从 inlinestyle属性中删除了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 notrevert to being displayed as blockbecause our CSS overrode that default setting; blanking out the inline displayproperty does not negate the rules in our style sheets.
由于内联样式不再指定 a display，因此<div>返回显示为table，因为这是我们放在样式表中的内容。该<div>不会没有恢复到被显示为block，因为我们的CSS凌驾于是默认设置; 消隐 inlinedisplay属性不会否定我们样式表中的规则。
For giggles, here's the Google query I used for verification of my answer: javascript style display empty string default
对于笑声，这是我用来验证我的答案的谷歌查询： javascript style display empty string default
...and a couple of links where this is mentioned:
...以及一些提到这一点的链接：
http://jszen.blogspot.com/2004/07/table-rowsrevealed.html
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/（不在文章中，但在评论部分）
回答by BoltClock
It sets the displaystyle to the default value for that element. For most elements if not all, the default value is something other than none.
它将display样式设置为该元素的默认值。对于大多数元素（如果不是全部），默认值不是none。
回答by Guffa
It removes the value for the display property so that the default value is used.
它删除显示属性的值，以便使用默认值。
It does notreset 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 displaystyle used for the element ends up being inlinebecause that's the default for the element, it is not reset back to the style specified in the HTML code.
display用于元素的样式最终是inline因为这是元素的默认样式，它不会重置回 HTML 代码中指定的样式。
回答by Naftali aka Neal
It sets the css for that element's display to nullwhich essentially wipes out what was set and it reverts to its default value.
它为该元素的显示设置 css null，基本上清除设置的内容并恢复到其默认值。
