jQuery show() vs adding Class

Question

Which of these is more efficient (i.e. faster):

$(elem).show();

or

$(elem).addClass(displayClass); // Where display class is "display: block;"

Or are they identical?

Answer 1

It depends what you're after, they do different things:

• $(elem).show(); - shows the element, restoring the display from before .hide() or restoring the default display for the element type
• $(elem).addClass(displayClass); - adds a class, always with a certain display, not really restoring what was there - this is less flexible

---

Which is faster? .addClass() hands down, you can test it yourself here, it simply does a lot less work than .show() does. However, it doesn't do as much feature-wise, so it's less flexible for the reasons above.

Answer 2

No, they are absolutely not identical.

There's a big difference between direct modifications to element styles and "indirect" modifications by changing the element's class, and that really should be pretty obvious. By writing cooperative code between Javascript and CSS, the class changes give you a lot more flexibility. The Javascript manages the state of elements, while the CSS drives the actual effect of that state.

The show() and hide() methods are handy and easy, but (in my opinion) managing state/appearance by class name is really a much more powerful and maintainable way to do things. In fact you can always write your own little jQuery plugins to add/remove classes that are meaningful to your app, to avoid having the class names themselves propagate through your code.