javascript获取transform中的属性值

 最近在做一个移动端的网站，其中一个难点就是导航，因为导航里面项目比较多，需要通过滑动来查看被遮住的项目，这个功能实际上就是以前pc端经常做的拖拽，因此安装老思路就上代码，在pc端的模拟器里面也是很顺溜的，但是一旦放到手机上一试，我哩个去，卡的不行，想了好久，发现是因为按照平时的思路，在写拖拽的时候是通过定位来实现的，但是定位这种东西在性能很鸡肋的手机端实在是太啃爹了。没办法，只好改用css3的transform来实现，这时问题来了，通常情况下，用js来获取元素样式值的时候，如果是用jquery,直接通过
css(‘property')直接获取就可以了，但是如果获取transform的属性值，js给返回的值却碉堡了，比如

document.defaultView.getComputedStyle(document.getElementById('nav'), null).transform

这时候返回matrix(1, 0, 0, 1, 100, 0)，这么一个东西，怎么获取里面的没一个值呢？比如说我要获取translateX值。
    在网上找了很多好久，唯一的一个答案就是通过正则提取，姑且不论这种方法是否可靠，单是正则就让我够难受的，我最讨厌的就是写正则和读正则了，最后变通一下，通过字符串处理函数把 matrix(1, 0, 0, 1, 100, 0)处理成数组，然后一一取值，效果相当的OK,例子如下：

var translates=document.defaultView.getComputedStyle(document.getElementById('nav'),null).transform;

第一步：通过translates.substring(7)提取1, 0, 0, 1, 100, 0，得到的是1, 0, 0, 1, 100, 0)，
第二部：将第一步提取的字符串转换成数组， translates.substring(7).split(',')，得到的结果是["1", " 0", " 0", " 1", " 100"," 0)"]，
第三步：提取你想要的值 ，parseFloat(translates.substring(7).split(',')[4])，这里得到的就是translateX的值，至于为什么要在这里使用parseFloat，是因为数组["1", " 0", " 0", " 1", " 100", " 0)"最后一个元素是一个数字和一个‘)’组成的，通过parseFloat就可以把‘)’去掉。

 

转载于:https://www.cnblogs.com/zhenwoo/p/4993780.html