js获取元素transform参数得出的我的理解

时间 2019-11-13

标签获取元素 transform 参数得出我的理解栏目 JavaScript 繁體版

原文原文链接

以前写页面的时候有试过想用js获取某些元素的translate的数值什么的，可是translate又是transform的子样式（勉强说说），理所固然就是先获取transform样式，再读里面的值。css

body{-webkit-transform: translateX(20px);}

但当我尝试这样作的时候，奇迹出现了：css3

当时个人心里几乎是崩溃的，我只想安安静静的获取translate的值而已啊，谁知给我弹出这货，虽然上高数课的时候也有讲到全部变化（二维、三维）效果均可以浓缩在一个矩阵里面的，但若是要逆向解析矩阵获得我想要的值就不是这么简单了。web

一次偶然的机会，我再次想用js获取translate的值，此次的结果出乎意料：浏览器

看到这一幕，简直是泪如雨下，虽然不能直接就获得我要的值，可是拿正则匹配一下就能够了。wordpress

你是否是觉得是jq作了手脚？其实否则，我比对了一下，发现两次body样式的写法是不同的：spa

第一次：code

body{-webkit-transform: translateX(20px);}

第二次：orm

<body style='-webkit-transform: translateX(20px);'></body>

没错，第一次是经过css设置，第二次是经过body的style属性设置的，按照个人理解，css和style属性虽然均可以对页面元素进行渲染，可是二者的地位是不同的。（如下含推测成分）blog

当页面加载时，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)的形式保存的（也许是方便计算机的运算），element

这就解释了为何 $('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