Get element css transition duration

by trolleymusic

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

<hr>

<button id="move">Move</button>
<button id="check">Check</button>

CSS

div {
    width: 20px;
    height: 20px;
    background: red;
    margin: 5px;
}

div.move {
    margin-left: 200px;
}

#one {
    -webkit-transition: all 1s ease-in-out;
}

#two {
    -webkit-transition: all 2s ease-in-out;
}

JavaScript

$(document).ready(function() {
    $('#move').click(function() {
        $('div').toggleClass('move')
    });
    $('#check').click(function() {
        /*for (s in $('div')[0]) {
            console.log($('div')[0][s]);
        }*/
        
        console.log(getStyle($('div')[0], '-webkit-transition-duration'));
        
        /*$('div').each(function () {
            console.log(this.style);
        });*/
    });
});
    
    
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}