有一些CSS属性给出的 auto
选项非常有用。但是,似乎没有一个适用于 display
属性的选项。我期望这会根据标签将 display
属性设置为浏览器默认值;例如,<div>
将重置为 display: block;
,而 <span>
将重置为 display: inline;
。
- 我错过了类似于
display: auto
的等效选项吗? - 如果没有,为什么没有?
- 最优雅的解决方法是什么?
有一些CSS属性给出的 auto
选项非常有用。但是,似乎没有一个适用于 display
属性的选项。我期望这会根据标签将 display
属性设置为浏览器默认值;例如,<div>
将重置为 display: block;
,而 <span>
将重置为 display: inline;
。
display: auto
的等效选项吗?你应该使用:
$('element').css('display','');
这将根据当前 CSS 级联的规则,将 display
属性设置为元素的默认值。
例如:
<span></span>
$('span').css('display','none');
$('span').css('display','');
将导致一个具有 display: inline
样式的 span
元素。
但是:
span { display: block }
<span></span>
$('span').css('display','none');
$('span').css('display','');
这将导致一个具有 display: block
属性的 span
。
这并不是问题:事实上,这几乎总是期望的结果。
display
值是 inline
,但浏览器的用户代理样式表为许多元素设置了不同的值。例如,Firefox 运行以下代码:http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css - thirtydot你需要使用 display: revert
,它类似于 unset
,但是保留了用户代理默认样式表的样式。
有一个inherit选项,它:
指定显示属性的值应该从父元素继承
除此之外,不要设置显示属性,它将默认为任何它默认的值。而且,如果您以编程方式将其设置为空,我认为它只是遵循默认行为:
document.getElementById('myElement').style.display = '';
<span>
标签会从 <div>
继承 display:block
属性,这可能不是 OP 想要的。 - Wesley Murchinherit
,特别是在显示属性方面。它在这个问题的背景之外非常有用。 - Wesley Murch根据父元素和相关标签元素,浏览器可以快速调整以适应它。最有效的方法是在HTML开头标签中使用DTD标准来声明显示选择器的其他可用属性,否则它仅使用“块”和“内联”。因此,如果已声明DTD,则在此情况下使用display: inline-block;
属性最佳。
a { display: block; }
,那么期望<a style="display: auto;">
会将其设置为inline
。 - jameshfisherdisplay: ''
的方式也可以实现这个吗? - jbyrddisplay: revert
是一个显著更好的答案。我还删除了对jQuery的引用,因为它现在非常过时,可能对访问此页面的任何人都没有帮助。 - jameshfisher