JavaScript style.display=“none” or jQuery .hide() is more efficient?

Question

document.getElementById("elementId").style.display="none"

is used in JavaScript to hide an element. But in jQuery,

$("#elementId").hide();

is used for the same purpose. Which way is more efficient? I have seen a comparison between two jQuery function .hide() and .css("display","none") here .

But my problem is whether pure JavaScript is more efficient than jQuery?

Answer 1

Talking about efficiency:

document.getElementById( 'elemtId' ).style.display = 'none';

---

What jQuery does with its .show() and .hide() methods is, that it remembers the last state of an element. That can come in handy sometimes, but since you asked about efficiency that doesn't matter here.

Answer 2

Efficiency isn't going to matter for something like this in 99.999999% of situations. Do whatever is easier to read and or maintain.

In my apps I usually rely on classes to provide hiding and showing, for example .addClass('isHidden')/.removeClass('isHidden') which would allow me to animate things with CSS3 if I wanted to. It provides more flexibility.

Answer 3

a = 2;

vs

a(2);
function a(nb) {
    lot;
    of = cross;
    browser();
    return handling(nb);
}

In your opinion, what do you think is going to be the fastest?

Answer 4

Yes.

Yes it is.

Vanilla JS is always more efficient.