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

来源：互联网发布：spaceman软件编辑：程序博客网时间：2024/06/09 15:30

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

（1）先上代码

<!DOCTYPE HTML><html><head>    <meta charset=UTF-8>    <title>recursion</title>    <style>    #div {        margin-top: 90px;        -webkit-transform: rotate(10deg);        transform: rotate(10deg);    }    </style></head><body>    <button>rotate</button>    <div id="div" style="width: 300px; height: 300px; border: 1px solid black; ">ddd</div></body><!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> --><script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script><script src="transform.js"></script></html>

//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）先上代码，设置行间样式

<!DOCTYPE HTML><html><head>    <meta charset=UTF-8>    <title>recursion</title>    <style>    #div {        margin-top: 90px;        -webkit-transform: rotate(10deg);        transform: rotate(10deg);    }    </style></head><body>    <button>rotate</button>    <div id="div" style="width: 300px; height: 300px; border: 1px solid black; transform: rotate(10deg) scale(1.1);">ddd</div></body><!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> --><script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script><script src="transform.js"></script></html>

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];    });

注意：设置成行间样式。

阅读全文

0 0