jQuery .hide()和.css(" display ", " none ")之间的差异

时间:2022-11-28 16:56:09

Is there any difference between

有什么区别吗?

jQuery('#id').show() and jQuery('#id').css("display","block")

and

jQuery('#id').hide() and jQuery('#id').css("display","none")

7 个解决方案

#1


88  

jQuery('#id').css("display","block")

jQuery(' # id '). css(“显示”、“块”)

The display property can have many possible values, among which are block, inline, inline-block, and many more.

显示属性可以有许多可能的值,其中包括块、内联、inline-block和更多的值。

The .show() method doesn't set it necessarily to block, but rather resets it to what you defined it (if at all).

show()方法并不一定要将其设置为块,而是将其重置为您定义的内容(如果有的话)。

In the jQuery source code, you can see how they're setting the display property to "" (an empty string) to check what it was before any jQuery manipulation: little link.

在jQuery源代码中,您可以看到如何将显示属性设置为“”(一个空字符串),以检查在jQuery操作之前的内容:小链接。

On the other hand, hiding is done via display: none;, so you can consider .hide() and .css("display", "none") equivalent to some point.

另一方面,隐藏是通过display来完成的:没有,所以您可以考虑.hide()和.css(“display”,“none”)等。

It's recommended to use .show() and .hide() anyway to avoid any gotcha's (plus, they're shorter).

建议使用.show()和.hide()来避免任何gotcha(加上,它们更短)。

#2


32  

Difference between show() and css({'display':'block'})

show()和css的区别({'display':'block'})

Assuming you have this at the beginning:

假设你一开始就有这样的想法:

<span id="thisElement" style="display: none;">Foo</span>

when you call:

当你调用:

$('#thisElement').show();

you will get:

你将得到:

<span id="thisElement" style="">Foo</span>

while:

而:

$('#thisElement').css({'display':'block'});

does:

:

<span id="thisElement" style="display: block;">Foo</span>

so, yes there's a difference.

所以,是的,有区别。

Difference between hide() and css({'display':'none'})

隐藏()和css的区别({'display':'none'})

same as above but change these into hide() and display':'none'......

和上面一样,但把它们改成hide()和display':'none'…

Another difference When .hide() is called the value of the display property is saved in jQuery's data cache, so when .show() is called, the initial display value is restored!

当.hide()被称为显示属性的值时,另一个区别是保存在jQuery的数据缓存中,因此,当调用.show()时,初始显示值将被恢复!

#3


6  

Yes there is a difference in the performance of both: jQuery('#id').show() is slower than jQuery('#id').css("display","block") as in former case extra work is to be done for retrieving the initial state from the jquery cache as display is not a binary attribute it can be inline,block,none,table, etc. similar is the case with hide() method.

是的是有区别的性能:jQuery(# id),告诉()低于jQuery(# id). css(“显示”、“块”),在前一种情况中额外的工作要做从jQuery缓存检索初始状态为显示不是一个二进制属性可以内联块,没有表等类似与隐藏()方法。

See: http://jsperf.com/show-vs-addclass

参见:http://jsperf.com/show-vs-addclass

#4


4  

no difference

没有区别

With no parameters, the .hide() method is the simplest way to hide an element:

在没有参数的情况下,.hide()方法是隐藏元素的最简单方法:

$('.target').hide(); The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

$(' .target ')hide();匹配的元素将被立即隐藏,没有动画。这大致相当于调用.css('display', 'none'),但显示属性的值保存在jQuery的数据缓存中,以便稍后显示的显示可以恢复到初始值。如果一个元素有内联的显示值,那么就隐藏和显示,它将再次显示内联。

Same about show

同样对显示

#5


3  

Yes there is a difference.

是的,有区别。

jQuery('#id').css("display","block") will always set the element you want to show as block.

jQuery(“#id”).css(“display”,“block”)将始终设置要显示为块的元素。

jQuery('#id').show() will et is to what display type it initially was, display: inline for example.

show()将会显示它最初的显示类型,显示:例如内联。

See Jquery Doc

看到Jquery文档

#6


2  

You can have a look at the source code (here it is v1.7.2).

您可以查看源代码(这里是v1.7.2)。

Except for the animation that we can set, this also keep in memory the old display style (which is not in all cases block, it can also be inline, table-cell, ...).

除了我们可以设置的动画之外,它还保留了旧的显示样式(在所有情况下都不是块,它也可以是内联的,表格单元,…)。

#7


1  

see http://api.jquery.com/show/

参见http://api.jquery.com/show/

With no parameters, the .show() method is the simplest way to display an element:

没有参数,.show()方法是显示元素最简单的方法:

$('.target').show();

$(' .target '),告诉();

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

匹配的元素将立即显示,没有动画。这大致相当于调用.css('display', 'block'),只是显示属性被还原到最初的任何东西。如果一个元素有内联的显示值,那么就隐藏和显示,它将再次显示内联。

#1


88  

jQuery('#id').css("display","block")

jQuery(' # id '). css(“显示”、“块”)

The display property can have many possible values, among which are block, inline, inline-block, and many more.

显示属性可以有许多可能的值,其中包括块、内联、inline-block和更多的值。

The .show() method doesn't set it necessarily to block, but rather resets it to what you defined it (if at all).

show()方法并不一定要将其设置为块,而是将其重置为您定义的内容(如果有的话)。

In the jQuery source code, you can see how they're setting the display property to "" (an empty string) to check what it was before any jQuery manipulation: little link.

在jQuery源代码中,您可以看到如何将显示属性设置为“”(一个空字符串),以检查在jQuery操作之前的内容:小链接。

On the other hand, hiding is done via display: none;, so you can consider .hide() and .css("display", "none") equivalent to some point.

另一方面,隐藏是通过display来完成的:没有,所以您可以考虑.hide()和.css(“display”,“none”)等。

It's recommended to use .show() and .hide() anyway to avoid any gotcha's (plus, they're shorter).

建议使用.show()和.hide()来避免任何gotcha(加上,它们更短)。

#2


32  

Difference between show() and css({'display':'block'})

show()和css的区别({'display':'block'})

Assuming you have this at the beginning:

假设你一开始就有这样的想法:

<span id="thisElement" style="display: none;">Foo</span>

when you call:

当你调用:

$('#thisElement').show();

you will get:

你将得到:

<span id="thisElement" style="">Foo</span>

while:

而:

$('#thisElement').css({'display':'block'});

does:

:

<span id="thisElement" style="display: block;">Foo</span>

so, yes there's a difference.

所以,是的,有区别。

Difference between hide() and css({'display':'none'})

隐藏()和css的区别({'display':'none'})

same as above but change these into hide() and display':'none'......

和上面一样,但把它们改成hide()和display':'none'…

Another difference When .hide() is called the value of the display property is saved in jQuery's data cache, so when .show() is called, the initial display value is restored!

当.hide()被称为显示属性的值时,另一个区别是保存在jQuery的数据缓存中,因此,当调用.show()时,初始显示值将被恢复!

#3


6  

Yes there is a difference in the performance of both: jQuery('#id').show() is slower than jQuery('#id').css("display","block") as in former case extra work is to be done for retrieving the initial state from the jquery cache as display is not a binary attribute it can be inline,block,none,table, etc. similar is the case with hide() method.

是的是有区别的性能:jQuery(# id),告诉()低于jQuery(# id). css(“显示”、“块”),在前一种情况中额外的工作要做从jQuery缓存检索初始状态为显示不是一个二进制属性可以内联块,没有表等类似与隐藏()方法。

See: http://jsperf.com/show-vs-addclass

参见:http://jsperf.com/show-vs-addclass

#4


4  

no difference

没有区别

With no parameters, the .hide() method is the simplest way to hide an element:

在没有参数的情况下,.hide()方法是隐藏元素的最简单方法:

$('.target').hide(); The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

$(' .target ')hide();匹配的元素将被立即隐藏,没有动画。这大致相当于调用.css('display', 'none'),但显示属性的值保存在jQuery的数据缓存中,以便稍后显示的显示可以恢复到初始值。如果一个元素有内联的显示值,那么就隐藏和显示,它将再次显示内联。

Same about show

同样对显示

#5


3  

Yes there is a difference.

是的,有区别。

jQuery('#id').css("display","block") will always set the element you want to show as block.

jQuery(“#id”).css(“display”,“block”)将始终设置要显示为块的元素。

jQuery('#id').show() will et is to what display type it initially was, display: inline for example.

show()将会显示它最初的显示类型,显示:例如内联。

See Jquery Doc

看到Jquery文档

#6


2  

You can have a look at the source code (here it is v1.7.2).

您可以查看源代码(这里是v1.7.2)。

Except for the animation that we can set, this also keep in memory the old display style (which is not in all cases block, it can also be inline, table-cell, ...).

除了我们可以设置的动画之外,它还保留了旧的显示样式(在所有情况下都不是块,它也可以是内联的,表格单元,…)。

#7


1  

see http://api.jquery.com/show/

参见http://api.jquery.com/show/

With no parameters, the .show() method is the simplest way to display an element:

没有参数,.show()方法是显示元素最简单的方法:

$('.target').show();

$(' .target '),告诉();

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

匹配的元素将立即显示,没有动画。这大致相当于调用.css('display', 'block'),只是显示属性被还原到最初的任何东西。如果一个元素有内联的显示值,那么就隐藏和显示,它将再次显示内联。