JavaScript style.display="none" or jQuery .hide() is more efficient?
JavascriptJqueryCssPerformanceJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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?
Solution 3 - Javascript
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.