Difference between using hide, prop, attr or css to hide an element with JQuery

Question

I have set up 4 divs to test the different results of using:

$("#div1").hide();
$("#div2").prop("hidden", true);
$("#div3").css("display","none");
$("#div4").attr("hidden", true);

I can see that the result is (I am using version 1.11.3):

<div id="div1" style="display: none;">Something</div>
<div id="div2" hidden="">Something</div>
<div id="div3" style="display: none;">Something</div>
<div id="div4" hidden="hidden">Something</div>

It seems kind of confusing to me to have four different ways of achieving pretty much the same result. I have seen some explanation in .hide() or display: none? jQuery but I wonder if someone can provide more information and mainly, when should I use which??

hidden is kind of new, and its attr maps to the prop, just like say, "title", so thats why "both" prop+attr look the same... .hide() is a shortcut. really though, i think the best way is to use classes, in bootstrap .hidden works. — dandavis
– dandavis, Commented Nov 6, 2015 at 20:35
Did you not read the first answer? It's right there. "This is roughly equivalent to calling .css('display', 'none')" — Sterling Archer
– Sterling Archer, Commented Nov 6, 2015 at 20:35

Taplar · Accepted Answer · 2015-11-06 20:38:13Z

3

//this is a wrapper function.  simply adds display none inline.  for ease of use
$("#div1").hide();
//prop is used to manipulate any property on the object.  hidden is a property.  so it doesn't stop you from doing it.
$("#div2").prop("hidden", true);
//css is a wrapper for the style attribute.  display is a valid css property so it won't stop it
$("#div3").css("display","none");
//this one seems odd.  i thought it would be hidden="hidden"  but anyway.  attr() is used to change the attributes on the markup.  hidden is a valid attribute so it doesn't stop you
$("#div4").attr("hidden", true);

It's all about your style of coding. If they all work, you get to use the one that you like best. Just try to be consistent if possible, imho.

answered Nov 6, 2015 at 20:38

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin L Hansen · Accepted Answer · 2018-07-17 07:24:23Z

0

There sure is a difference, but I'm not going to cover them all.

A real life story:

I just had a project, in which I needed to filter DOM elements by their display property. Same DOM elements was set to 'none', by using .hide() and shown by setting .show()

This usage, while short and neat, made problems filtering by display property, as it always showed 'none' in a console output. Even if the element list showed 'block'. So a caching occours using .hide()

You don't just wanna use whatever you like best. Only if you like best what works for your specific needs ;)

answered Jul 17, 2018 at 7:24

Martin L Hansen

12 bronze badges

1 Comment

Nick Over a year ago

Welcome to SO. This post doesn't address the technical issue raised in the question. See stackoverflow.com/help/how-to-answer.

Collectives™ on Stack Overflow

Difference between using hide, prop, attr or css to hide an element with JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related