style.display =''实际上做什么？ [英] What does style.display = '' actually do?

问题描述

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

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:

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

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

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

是否重置原始显示属性？

Does it "reset" the original display property?

还是删除display属性，从而使用默认样式进行显示？

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?

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

(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.)

感谢任何建议或链接。

推荐答案

通过消隐内联display：none将元素的display属性重置为默认值，从而导致元素按照页面排名的CSS规则定义的显示属性。

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.

例如，以下是具有myElementID的< div> 。

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

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

A < div> display：block 。在我们的样式表中，假设我们指定您的< div> 显示为 table ：

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:

div#myElement
{
    display:table;
}

载入您的网页时，< div& 显示为 table 。如果要使用脚本隐藏此< div> ，您可以执行以下任何操作：

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

这些都有相同的效果：添加一个内联 style 属性添加到您的< div> ：

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

这些从 display inline style 属性：

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

<div style=""></div>

由于内联样式不再指定显示，< div> 返回显示为 table ，因为这是我们放入样式表。 < div> 不会不会恢复显示为阻止，因为我们的CSS覆盖默认设置;删除内联显示属性不会否定我们的样式表中的规则。

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.

对于giggles，这里是我用来验证我的回答的Google查询： javascript样式显示空字符串默认

For giggles, here's the Google query I used for verification of my answer: 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 /
（不在文章中，但在评论部分）

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)

这篇关于style.display =''实际上做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！