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 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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>
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;
}
}
var npaddingTop = $myDiv.css('padding-top');
var npaddingTop = getComputedStyle(myDiv).paddingTop;
var npaddingTop = getStyle(myDiv, 'paddingTop');
var npaddingTop = getStyle2(myDiv)['paddingTop'];