本文探讨JavaScript获取元素transform值时遇到的矩阵返回问题。通过对比CSS文件设置与style属性设置，解析了getComputedStyle返回矩阵的原因，并指出jQuery的css()方法实际读取的是最终渲染规则。建议通过内联style设置transform以便直接获取参数值，避免逆向解析矩阵的复杂性。
JavaScript获取CSS Transform值的原理与内联样式区别
在页面开发过程中，曾尝试通过JavaScript获取元素translate等transform子属性的具体数值。由于translate属于transform的一部分，直观思路是先获取transform样式再提取内部值。
具体代码示例如下：
body{-webkit-transform: translateX(20px);}然而实际执行时，结果令人意外：
此时得到的并非预期的translate数值，而是一个矩阵形式。尽管数学上所有二维或三维变换均可浓缩为矩阵，但逆向解析该矩阵以获取原始参数值并非易事。
随后再次尝试通过JS获取translate值，结果却出乎意料地顺利：
虽然仍不能直接获得单一数值，但通过正则表达式匹配即可提取所需参数。
这并非jQuery的特殊处理，经比对发现两次body样式的写法存在差异：
第一次尝试：
具体代码示例如下：
body{-webkit-transform: translateX(20px);}第二次尝试：
具体代码示例如下：
<body style='-webkit-transform: translateX(20px);'></body>区别在于，第一次通过外部CSS设置，第二次通过body的style属性直接设置。虽然两者均影响页面渲染，但地位不同：style作为元素属性，会原样保存用户设置的值，如同烙印般固定在特定元素上。
页面加载时，CSS与style共同作用于渲染树。不同之处在于，style属性保存原始设置值，因此通过document.body.style.webkitTransform可直接获取设置的值。若直接获取CSS设置的值（排除解析CSS文件的方法）则较为困难，因为CSS文件加载形成渲染树后任务即完成。CSS与style产生的最终渲染规则均可通过window.getComputedStyle(element)获取。该方法显示，transform最终渲染规则以矩阵matrix(x,x,x,x,x)形式保存，这或许是为了便于计算机运算。
这解释了$('body').css('-webkit-transform')返回矩阵的原因。$().css()方法从浏览器最终渲染规则（即window.getComputedStyle(element)）中返回结果，因此无法直接读取CSS设置参数。当使用$().css()设置样式时，实际是设置元素的style属性（内联样式）。尽管方法名含'css'，但其与CSS文件无直接关联，这也印证了无法直接获取CSS设置值的观点。
总结：
1. CSS和style共同作用渲染树，且style设置的值会原样保存为元素的style属性的子属性，最终渲染规则可以通过window.getComputedStyle(element) 找到
2. jq$().css()方法获取的是最终渲染规则，设置的是style属性（内联样式）
建议：
1.当我们需要实时获取并修改元素transform各参数的时候（例如用translate实现各种滑动效果），应该把transform设置成元素的内联属性（通过style设置）,这样方便读取
2.矩阵虽吓人，但若不想成为平凡的页面仔，还是需要搞懂
以上所述就是本文的全部内容了，希望大家能够喜欢。