是的,它通过清空内联的"display:none"将元素的显示属性重置为默认值,导致该元素退回到由页面排名CSS规则定义的显示属性。
例如,这是一个ID为"myElement"的<div>
示例。
<div id="myElement"></div>
默认情况下,<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":""});
这些代码从内联 style
属性中删除了 display
CSS 属性:
<div style=""></div>
由于行内样式不再指定
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/
(不在文章中,在评论部分)