HTML Preparation code:
x
 
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2
3
<style>
4
  #wrap1 {
5
    width:300px;
6
    margin:10px;
7
    padding:10px;
8
    border:10px solid black;
9
  }
10
11
  #wrap2 {
12
    margin:10px;
13
    padding:10px;
14
    border:10px solid red;
15
  }
16
17
  #myDiv {
18
    margin:10px;
19
    padding:10px;
20
    border:10px solid blue;
21
  }
22
</style>
23
24
<div id="wrap1">
25
  <div id="wrap2">
26
    <div id="myDiv">
27
      Test
28
    </div>
29
  </div>
30
</div>
Script Preparation code:
 
  var myDiv = document.getElementById('myDiv');
  var $myDiv = $(myDiv);
var getStyle2;
  
  // 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;
  }
if (window.getComputedStyle) {
  getStyle2 = window.getComputedStyle;
} else {
  getStyle2 = function(el) {
      return el.currentStyle;
  }
}
Tests:
  • jQuery.css

     
    var npaddingTop = $myDiv.css('padding-top');
  • getComputedStyle()

     
    var npaddingTop = getComputedStyle(myDiv).paddingTop;
  • getStyle()

     
    var npaddingTop = getStyle(myDiv, 'paddingTop');
  • getStyle2()

     
    var npaddingTop = getStyle2(myDiv)['paddingTop'];
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    jQuery.css
    getComputedStyle()
    getStyle()
    getStyle2()

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 25 days ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Chrome 134 on Windows
View result in a separate tab
Test name Executions per second
jQuery.css 764204.7 Ops/sec
getComputedStyle() 1654128.6 Ops/sec
getStyle() 5409972.5 Ops/sec
getStyle2() 1676912.2 Ops/sec