blocks|key|277729|text|可见性:hidden将隐藏元素，但元素是它们的DOM。在display:none的情况下，它将从DOM中删除元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277730|因此您可以选择隐藏或取消隐藏元素。但是一旦你删除了它(我的意思是显示无)，它就不会清除相反的值。display有几个值，如display:block、display:inline、display:inline-block和许多其他值。你可以从W3C上查看。|277731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

visibility:hidden will hide the element but element is their with DOM. And in case of display:none it'll remove the element from the DOM.

So you have option for element to either hide or unhide. But once you delete it ( I mean display none) it has not clear opposite value. display have several values like display:block,display:inline, display:inline-block and many other. you can check it out from W3C.

blocks|key|277753|text|当在Javascript中更改元素的display时，在许多情况下，“撤销”element.style.display+=+"none"的结果是element.style.display+=+""。这将从style属性中删除display声明，将display属性的实际值恢复为在文档的样式表中设置的值(如果没有在其他地方重新定义，则恢复为浏览器默认值)。但是更可靠的方法是在CSS中有一个类，比如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|277754|.invisible+{+display:+none;+}|code-block|syntax|javascript|277755|以及向/从element.className添加/删除这个类名。|277756|entityMap^0|I|7|12|U|20|Q|2U|5|34|7|3F|7|0|0|5|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|N|$]]

When changing element's <code>display</code> in Javascript, in many cases a suitable option to 'undo' the result of <code>element.style.display = "none"</code> is <code>element.style.display = ""</code>. This removes the <code>display</code> declaration from the <code>style</code> attribute, reverting the actual value of <code>display</code> property to the value set in the stylesheet for the document (to the browser default if not redefined elsewhere). But the more reliable approach is to have a class in CSS like

<pre><code>.invisible { display: none; }
</code></pre>

and adding/removing this class name to/from <code>element.className</code>.

blocks|key|61525|text|最好的“相反”方法是将其恢复为默认值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|61526|display:+inline|code-block|syntax|javascript|61527|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The best "opposite" would be to return it to the default value which is:

<pre><code>display: inline
</code></pre>

blocks|key|277808|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277809|display:+normal;|code-block|syntax|javascript|277810|它照常工作...这是css中的一个小技巧;)|277811|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

you can use 

<pre><code>display: normal;
</code></pre>

It works as normal.... Its a small hacking in css ;)

blocks|key|277876|text|像Paul解释的那样，在HTML中没有与display相反的文字:+none，因为每个元素都有不同的默认显示，您还可以使用类或内联样式等更改显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277877|然而，如果你使用像jQuery这样的东西，它们的显示和隐藏功能的行为就像是显示无的对立面。当您隐藏元素，然后再次显示该元素时，它将以与隐藏前完全相同的方式显示。它们通过在隐藏元素时存储display属性的旧值来做到这一点，这样当您再次显示它时，它将以隐藏它之前的相同方式显示。https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180|offset|length|277878|这意味着，如果您将div设置为display+inline或inline-block，然后将其隐藏，然后再次显示它，它将再次显示为display+inline或inline-block，与以前一样|277879|<div+style="display:inline"+>hello</div>
<div+style="display:inline-block">hello2</div>
<div+style="display:table-cell"+>hello3</div>|code-block|syntax|javascript|277880|脚本：|277881|++$('a').click(function(){
++++++++$('div').toggle();
++++});|277882|请注意，即使在隐藏(+display+:none)并再次显示之后，div的display属性仍将保持不变。|277883|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180^0|0|3U|2M|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Like Paul explains there is no literal opposite of display: none in HTML as each element has a different default display and you can also change the display with a class or inline style etc.

However if you use something like jQuery, their show and hide functions behave as if there was an opposite of display none. When you hide, and then show an element again, it will display in exactly the same manner it did before it was hidden. They do this by storing the old value of the display property on hiding of the element so that when you show it again it will display in the same way it did before you hid it.
<a href="https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180" rel="nofollow">https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180</a>

This means that if you set a div for example to display inline, or inline-block and you hide it and then show it again, it will once again show as display inline or inline-block same as it was before

<pre><code>&lt;div style="display:inline" &gt;hello&lt;/div&gt;
&lt;div style="display:inline-block"&gt;hello2&lt;/div&gt;
&lt;div style="display:table-cell" &gt;hello3&lt;/div&gt;
</code></pre>

script:

<pre><code> $('a').click(function(){
 $('div').toggle();
 });
</code></pre>

Notice that the display property of the div will remain constant even after it was hidden (display:none) and shown again.

blocks|key|277913|text|我使用display:block;，它对我很有效|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|277914|entityMap^0|3|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I use
<code>display:block;</code>
It works for me

blocks|key|61699|text|在打印机友好样式表的情况下，我使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|61700|/*+screen+style+*/
.print_only+{+display:+none;+}

/*+print+stylesheet+*/
div.print_only+{+display:+block;+}
span.print_only+{+display:+inline;+}
.no_print+{+display:+none;+}|code-block|syntax|javascript|61701|当我需要打印包含值的表单，并且输入字段很难打印时，我使用了它。因此，我添加了包装在span.print_only标记中的值(在其他地方使用了div.print_only)，然后将.no_print类应用于输入字段。因此，在屏幕上，您将看到输入字段，并且在打印时，只能看到值。如果您想获得更好的体验，可以在字段更新时使用JS更新span标记中的值，但在我的示例中不需要这样做。也许不是最优雅的解决方案，但它对我很有效！|61702|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In the case of a printer friendly stylesheet, I use the following:

<pre><code>/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }
</code></pre>

I used this when I needed to print a form containing values and the input fields were difficult to print. So I added the values wrapped in a span.print_only tag (div.print_only was used elsewhere) and then applied the .no_print class to the input fields. So on-screen you would see the input fields and when printed, only the values. If you wanted to get fancy you could use JS to update the values in the span tags when the fields were updated but that wasn't necessary in my case. Perhaps not the the most elegant solution but it worked for me!

blocks|key|61716|text|您可以使用此display:block;，也可以添加overflow:hidden;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|61717|entityMap^0|6|E|Q|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can use this <code>display:block;</code> and also add <code>overflow:hidden;</code>

blocks|key|61727|text|对display:+none最好的答案是|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|61728|display:inline|code-block|syntax|javascript|61729|或|61730|display:normal|61731|entityMap^0|1|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

The best answer for <code>display: none</code> is

<pre><code>display:inline
</code></pre>

or

<pre><code>display:normal
</code></pre>

blocks|key|278107|text|当我构建一个应用程序时，我遇到了这个挑战，我希望为某些用户隐藏一个表，而不是为其他用户隐藏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278108|最初，我将其设置为display:none，然后将其设置为display:inline-block，用于那些我想要查看它的用户，但我遇到了您可能会想到的格式问题(列合并或通常混乱)。|278109|我的解决方法是先显示表格，然后对那些我不想看到的用户执行"display:none“。这样，它可以正常格式化，但随后会根据需要消失。|278110|这是一个横向的解决方案，但可能会对某些人有所帮助！|278111|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

I ran into this challenge when building an app where I wanted a table hidden for certain users but not for others. 

Initially I set it up as display:none but then display:inline-block for those users who I wanted to see it but I experienced the formatting issues you might expect (columns consolidating or generally messy).

The way I worked around it was to show the table first and then do "display:none" for those users who I didn't want to see it. This way, it formatted normally but then disappeared as needed.

Bit of a lateral solution but might help someone!

blocks|key|61809|text|您可以使用display:+block|type|unstyled|depth|inlineStyleRanges|entityRanges|data|61810|示例：|61811|<!DOCTYPE+html>
<html>
<body>

<p+id="demo">Lorem+Ipsum

<button+type="button"+
onclick="document.getElementById('demo').style.display='none'">Click+Me!</button>
<button+type="button"+
onclick="document.getElementById('demo').style.display='block'">Click+Me!</button>

</body>
</html>+|code-block|syntax|javascript|61812|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can use display: block

Example : 

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;p id="demo"&gt;Lorem Ipsum&lt;/p&gt;

&lt;button type="button" 
onclick="document.getElementById('demo').style.display='none'"&gt;Click Me!&lt;/button&gt;
&lt;button type="button" 
onclick="document.getElementById('demo').style.display='block'"&gt;Click Me!&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt; 
</code></pre>

blocks|key|61841|text|在使用原生react时，'none‘的对立面是'flex’。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|61842|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

opposite of 'none' is 'flex' while working with react native.

blocks|key|278202|text|display:unset将其设置回某个初始设置，而不是以前的"display“值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278203|我只是再次复制了之前的显示值(在我的示例中display:+flex;)+(在display+non之后)，并且它成功地过度尝试了display:none|278204|(我使用display:none来隐藏移动和小屏幕上的元素)|278205|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

display:unset sets it back to some initial setting, not to the previous &quot;display&quot; values
i just copied the previous display value (in my case display: flex;)
again(after display non), and it overtried the display:none successfuly
(i used display:none for hiding elements for mobile and small screens)

blocks|key|278214|text|要恢复到原始状态，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278215|+display=""|code-block|syntax|javascript|278216|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To return to original state put:
<pre><code> display=&quot;&quot;
</code></pre>

The opposite of <code>visibility: hidden</code> is <code>visibility: visible</code>. Similarly, is there any opposite for <code>display: none</code>?

Many people become confused figuring out how to show an element when it has <code>display: none</code>, since it's not as clear as using the <code>visibility</code> property.

I could just use <code>visibility: hidden</code> instead of <code>display: none</code>, but it does not give the same effect, so I am not going with it.

Is there an opposite to display:none?

jQuery

visibility: hidden的对立面是visibility: visible。同样，display: none也有相反的情况吗？由于元素没有使用visibility属性那么清晰，因此很多人对如何在元素具有display: none时显示元素感到困惑。我可以直接使用visibility: hidden而不是dis...

问是否有相反的显示:无？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有相反的显示:无？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有相反的显示:无？
EN