之前写页面的时候，我尝试用js来获取一些元素的translate的值，但是translate是transform的子样式(勉强说来)，所以先获取transform样式，然后读取里面的值是很自然的。

复制代码如下： body {-WebKit-transform : translate x(20px)；}

但当我试图这样做时，奇迹出现了：

当时我的心都快崩溃了，只想安安静静的得到翻译的价值。谁知道给我弹出这个产品？虽然在高三数学课上也提到过变化的所有效果(2D和3D)都可以集中在一个矩阵中，但是逆向分析矩阵得到我想要的值并不是那么简单。

偶然的机会，我又一次想用js来获取translate的值，这次的结果出乎意料：

看到这一幕，我泪流满面。虽然不能直接得到想要的价值，但可以定期匹配。

你认为jq做错了什么吗？其实不然，我对比了一下，发现体式的写法有两次不同：

第一次：

复制代码如下： body {-WebKit-transform : translate x(20px)；}

第二次：

复制的代码如下： body style='-WebKit-transform : translatex(20px)；'/body

没错，第一次是css设置的，第二次是body的style属性设置的。根据我的理解，虽然css和style属性可以渲染页面元素，但是它们的状态是不同的。(以下包含推测成分)

页面加载时，css和样式在树的渲染中起作用，会影响元素的实现。不同的是，风格是元素的属性，用户设置的东西要保存，就像一个品牌深深地烙印在一个特定的元素上一样。因此，当body通过style设置“-WebKit-Transform”时，我们可以通过document . body . style . webkittransform得到设置值，可能你有疑问，直接得到css设置的值就可以了。但我觉得这是做不到的(解析css文件的方法除外)，因为css文件加载后，其任务在渲染树形成后就完成了，通过window.getcomputedstyle(元素)可以找到css和style生成元素的渲染规则。用这种方法，我们可以看到变换生成的渲染规则以矩阵maxrix(x，x，x，x，x，x，x)的形式保存(可能便于计算机操作)。

这解释了为什么$(“body”)。css ('-WebKit-transform ')返回到矩阵，它还显示了$()。css()方法返回浏览器最终呈现规则(即window)的结果。getcomputedstyle(元素))，所以它无法读取你的CSS设置参数，而当你使用$()的时候虽然这个$()。css()有‘CSS’这个词，它与‘CSS文件’无关。也许这可以证明我上面说的：‘你不能直接得到CSS设置的值’。

总结：

1.css和style协同渲染树，style设置的值会保存为元素style属性的子属性，最终的渲染规则可以通过window.getcomputedstyle(元素)找到

2.jq $()。方法获取最终的呈现规则并设置样式属性(内联样式)

建议：

1.当我们需要实时获取和修改元素transform的参数时(比如使用translate实现各种滑动效果)，就要将transform设置为元素的内联属性(样式设置)，方便阅读

2.虽然矩阵很恐怖，但如果你不想成为一个普通的页面，你还是需要了解它

以上就是本文的全部内容，希望大家喜欢。