Run details:
Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0
Firefox 101
Windows 8.1
Desktop
2 years ago
Test name Executions per second
jQuery.css 279227.2 Ops/sec
getComputedStyle() 657386.5 Ops/sec
getStyle() 623220.8 Ops/sec
getStyle2() 658476.2 Ops/sec
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'];