js获取元素transform参数得出的个人理解
之前写页面的时候有试过想用js获取某些元素的translate的数值什么的，但是translate又是transform的子样式（勉强说说），理所当然就是先获取transform样式，再读里面的值。
body{-webkit-transform: translateX(20px);}
但当我尝试这样做的时候，奇迹出现了：
当时我的内心几乎是崩溃的，我只想安安静静的获取translate的值而已啊，谁知给我弹出这货，虽然上高数课的时候也有讲到所有变化（二维、三维）效果都可以浓缩在一个矩阵里面的，但如果要逆向解析矩阵得到我想要的值就不是这么简单了。
一次偶然的机会，我再次想用js获取translate的值，这次的结果出乎意料：
看到这一幕，简直是泪如雨下，虽然不能直接就得到我要的值，但是拿正则匹配一下就可以了。
你是不是以为是jq做了手脚？其实不然，我比对了一下，发现两次body样式的写法是不一样的：
第一次：
body{-webkit-transform: translateX(20px);}
第二次：
<body style='-webkit-transform: translateX(20px);'></body>
没错，第一次是通过css设置，第二次是通过body的style属性设置的，按照我的理解，css和style属性虽然都可以对页面元素进行渲染，但是两者的地位是不一样的。（以下含推测成分）
当页面加载时，css和style对渲染树产生了作用，都会影响元素的变现，不同的地方在于style是元素的属性，用户设置了什么就应该保存什么，就想一个烙印深深烙在了特定元素上，所以当body通过style设置‘-webkit-transform’时，我们可以通过 document.body.style.webkitTransform 原样获取设置的值。也许你会有疑问，那直接获取css设置的值不就好了嘛。但我觉得这是做不到的（除去解析css文件的方法），因为css文件被加载完，形成渲染树后它的任务就完成了，css和style所产生的最终对元素进行渲染的规则都可以通过 window.getComputedStyle(element) 找到。通过这个方法我们可以看到，transform最终产生的渲染规则是以矩阵maxrix(x,x,x,x,x)的形式保存的（也许是方便计算机的运算），
这就解释了为什么 $('body').css('-webkit-transform') 这货会返回矩阵了，而且也看出了$().css()方法是从浏览器最终渲染规则中返回结果的（就是 window.getComputedStyle(element) ），所以它是读取不了你的css设置参数的，而且当你用$().css()给元素设置样式时，其实它是通过设置元素style属性（内联）设置的，试试你就知道了。虽然这个$().css()有‘css’字样，但是它和‘css文件’没有半毛钱关系，或许这就能证明上面我说的：‘不能直接获取css设置的值’吧。
总结：
1.css和style共同作用渲染树，且style设置的值会原样保存为元素的style属性的子属性，最终渲染规则可以通过 window.getComputedStyle(element) 找到
2.jq $().css()方法获取的是最终渲染规则，设置的是style属性（内联样式）
建议：
1.当我们需要实时获取并修改元素transform各参数的时候（例如用translate实现各种滑动效果），应该把transform设置成元素的内联属性（通过style设置）,这样方便读取
2.矩阵虽吓人，但若不想成为平凡的页面仔，还是需要搞懂的，附张鑫旭的博文
理解CSS3 transform中的Matrix(矩阵)
2015-07-24 00:49:08
js获取元素transform参数得出的个人理解的更多相关文章
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- js获取元素提示信息
js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- js获取url中参数名也参数值
要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法. 在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...
- js获取元素显示隐藏的当前状态
js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- js获取url的参数和值的N种有效方法
js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
随机推荐
- HTML Jquery；marquee标签
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- BroadCastReceiver中耗时操作导致ANR
現象:廣播接收器中進行耗時的I/O操作導致ANR. 查資料發現每次广播到来时 , 会重新创建 BroadcastReceiver 对象 , 并且调用 onReceive() 方法 , 执行完以后 该对 ...
- ColorFilter类
以前没用到过LightingColorFilter这个类 ,google了下 @Override protected void onDraw(Canvas canvas) { int mul = 0x ...
- Process.StandardInput属性
获取用于写入应用程序输入的流. 命名空间:System.Diagnostics程序集:System(在 system.dll 中) 语法 C# C++ VB public StreamWr ...
- 如何在windows系统自带命令查看硬件信息？
如何在windows系统自带命令查看硬件信息? 对于在windows下查看系统信息大家一定不陌生了,我现在说几个最常用的方法,对命令感兴趣的朋友看看,(给菜鸟看的,老手就不要笑话我了,大家都是从那个时 ...
- oracle查询转换_inlist转换
oracle的optimizer会对一些sql语句进行查询转换,比如: 合并视图 子查询非嵌套化 inlist转换 下面讲讲遇到的in list转化优化的案例: create table test( ...
- POJ_2392_Space_Elevator_(动态规划,背包)
描述 http://poj.org/problem?id=2392 磊方块,每种方块有数量,高度,以及该种方块所能处在的最高高度.问最高磊多高? Space Elevator Time Limit: ...
- BZOJ1510: [POI2006]Kra-The Disks
1510: [POI2006]Kra-The Disks Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 265 Solved: 157[Submit][ ...
- CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1)
终于上手as了,感觉很爽 但是感觉也特闹心啊 还好有stackoverflow(这特么才是一个神奇的网站好吗) 废话少说 记录一下: 前面历经的磨难暂时不说了,就这个CPU acceleration ...
- HDU 5968 异或密码 【模拟】 2016年中国大学生程序设计竞赛（合肥）
异或密码 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem Des ...