Performance difference between using jQuery.css() and the standard DOM style properties.

jquery_css_vs_dom.js

// 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"
});

// 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";

// RESULTS: using jQuery.css() was 73% slower than native in Chrome
// Try the test yourself at http://jsperf.com/jquery-css-vs-native-dom
//