如何在JavaScript中提取CSS transform矩阵中的值？

你可以通过以下两种实用方法提取矩阵的最后一个值：

方法一：字符串分割处理 #

直接对返回的矩阵字符串做拆分操作，步骤简单直观：

1. 剔除字符串首尾的matrix(和)
2. 用, 分割成数组
3. 取数组最后一项并转为数字

代码示例：

const el = document.querySelector('[data-holder]');
const transformStr = getComputedStyle(el).transform;
const lastValue = Number(transformStr.replace(/^matrix\(|\)$/g, '').split(', ').pop());
console.log(lastValue); // 输出: -560

方法二：使用DOMMatrix API（现代规范方法） #

现代浏览器原生支持DOMMatrix接口，能直接解析矩阵字符串，2D矩阵的最后一个值对应m42属性（即Y轴平移值）：

代码示例：

const el = document.querySelector('[data-holder]');
const transformStr = getComputedStyle(el).transform;
const matrix = new DOMMatrix(transformStr);
const lastValue = matrix.m42;
console.log(lastValue); // 输出: -560

注意：如果元素未设置transform，getComputedStyle(el).transform会返回none，建议先做判断再执行提取逻辑：

const transformStr = getComputedStyle(el).transform;
if (transformStr !== 'none') {
  // 执行提取操作
}

内容的提问来源于stack exchange，提问作者Math