jquery.css vs getComputedStyle (v6)

Revision 6 of this benchmark created by test on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
  #wrap1 {
    width:300px;
    margin:10px;
    padding:10px;
    border:10px solid black;
  }

  #wrap2 {
    margin:10px;
    padding:10px;
    border:10px solid red;
  }

  #myDiv {
    margin:10px;
    padding:10px;
    border:10px solid blue;
  }
</style>

<div id="wrap1">
  <div id="wrap2">
    <div id="myDiv">
      Test
    </div>
  </div>
</div>

Setup

var myDiv = document.getElementById('myDiv');
  var $myDiv = $(myDiv);
  var cs = document.defaultView.getComputedStyle(myDiv, null);
  
  // getComputedStyle isn't compatible with all older browsers (notably IE),
  // so this is a wrapper function that works with those browsers.
  // From http://www.quirksmode.org/dom/getstyles.html
  function getStyle(el, styleProp) {
    if (el.currentStyle)
      var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
  }

Test runner

Ready to run.

Testing in
TestOps/sec
jquery .css()
var npaddingTop = $myDiv.css('padding-top');
ready
cs.property camel
var npaddingTop = cs.paddingTop;
ready
currentStyle dashed
var npaddingTop = myDiv.currentStyle['padding-top'];
ready
currentStyle camel
var npaddingTop = myDiv.currentStyle['paddingTop'];
ready
cs getProperty dashed
var npaddingTop = cs.getPropertyValue('padding-top');
ready
cs brackets dashed
var npaddingTop = cs['padding-top'];
ready
cs brackets camel
var npaddingTop = cs['paddingTop'];
ready
FF CSSValue
var npaddingTop = cs.getPropertyCSSValue('padding-top').cssText
ready

Revisions

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