$ CSS vs native

Benchmark created on

Preparation HTML

<div class="main-content" /> 
<script
  src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
  crossorigin="anonymous"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
$.css
// get reference to a DOM element
var el = document.querySelector(".main-content");

// set some styles using jQuery.css()
$(el).css({
  background: "#FF0000",
  "box-shadow": "1px 1px 5px 5px red",
  width: "100px",
  height: "100px",
  display: "block"
});
ready
element.style
// get reference to a DOM element
var el = document.querySelector(".main-content");

// now set via the native DOM style object
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";
ready

Revisions

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