Is there any difference between
jQuery('#id').show() and jQuery('#id').css("display","block")
and
jQuery('#id').hide() and jQuery('#id').css("display","none")
jQuery('#id').css("display","block")
The display
property can have many possible values, among which are block
, inline
, inline-block
, and many more.
The .show()
method doesn't set it necessarily to block
, but rather resets it to what you defined it (if at all).
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.
On the other hand, hiding is done via display: none;
, so you can consider .hide()
and .css("display", "none")
equivalent to some point.
It's recommended to use .show()
and .hide()
anyway to avoid any gotcha's (plus, they're shorter).
Difference between show() and 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'})
same as above but change these into hide() and 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!
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.
With no parameters, the .hide() method is the simplest way to hide an element:
$('.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.
Same about show
.show()
will set the proper display
property, while you'd have to select the proper property manually, with .css()
Yes there is a difference.
jQuery('#id').css("display","block")
will always set the element you want to show as block.
jQuery('#id').show()
will et is to what display type it initially was, display: inline for example.
See Jquery Doc
You can have a look at the source code (here it is 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
, ...).
see http://api.jquery.com/show/
With no parameters, the .show() method is the simplest way to display an element:
$('.target').show();
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.