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

Question

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

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

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

简单的问题:什么是style.display = ''真正做到？

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

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

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

很高兴知道:有没有人知道任何类型的文档的链接？

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

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

Answer 1

":无显示",引起元素在网页的排名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为您的内联添加内联属性<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从内联style属性中删除CSS 属性:

<div style=""></div>

由于内联样式不再指定a 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/ (不在文章中,但在评论部分)

Answer 2

它将display样式设置为该元素的默认值.对于大多数元素(如果不是全部),默认值不是none.

Answer 3

它会删除display属性的值,以便使用默认值.

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

例如,你有这个:

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

这样做:

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

display用于元素的样式最终是inline因为这是元素的默认值,它不会重置为HTML代码中指定的样式.