踩坑--关于jq和zepto的css方法对transform的值的获取值的不同

今天做图形旋转的一个活动，在获取dom元素的时候，发现$(obj).css('transform')的值的时候;发现了一下几类情况：

（1）先上代码

    
    
    




    rotate
    
ddd

//transform.js
$(function() {
    var test = function() {
        var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
        var wt = $('#div').css('transform'),
            wts = wt.match(reg);
        var $2 = RegExp.$2;
        console.log($2);
        div.style['-webkit-transform'] = wt.replace($2, parseFloat(RegExp.$3) + 10 + RegExp.$4);
    }
    $('button').on('click', function() {
        test()
    });
});

注意：这一类情况下，在没有设置行间样式的时候，不论是zepto还是jquery，获取到的都是一个矩阵

（2）先上代码，设置行间样式

    
    
    



    rotate
    
ddd

1.在用zepto的时候，获取的结果如图所示

很显然，获取的是我们设置的transform的值。

但是，当我们用jquery的时候，获取的结果却依然是矩阵

所以，如果小伙伴们想获取transform的值，可以替换一下，用zepto。

或者可以直接用如下方式来获取

$(function() {
    var supportCssArr = ["transform", "webkitTransform", "WebkitTransform"],
        styles = $('div')[0].style,
        supportCss;

    $.each(supportCssArr, function(i, item) {
        if (styles[item] != undefined) {
            supportCss = item;
            return false;
        }
    });

    var wt = $('#div')[0].style[supportCss];
    
});

注意：设置成行间样式。