jQuery show/hide vs css("display","none/block") (v40)

Revision 40 of this benchmark created on

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>.hide{display:none}</style>

<div id="remove" style="background:red;width:100px;height:100px;"></div>

<script type = "text/javascript">
$elem = $("#remove");

function showElement(element){
      element[0].style.display = "block";
}
function hideElement(element){
      element[0].style.display = "none";
}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
show/hide
$elem.show();
$elem.hide();
ready
jquery css
$elem.css("display", "block");
$elem.css("display", "none");
ready
css 1
$elem[0].style.display = "block"
$elem[0].style.display = "none";
ready
function
showElement($elem);
hideElement($elem);
ready
css class
$elem.removeClass('hide');
$elem.addClass('hide');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.