如何通过jQuery获取元素的CSS transform属性值

直接调用.css('transform')拿不到你预期的translateX(xxxpx)格式值，是因为浏览器渲染后会把所有transform规则计算为矩阵格式返回，默认返回值形如matrix(1, 0, 0, 1, x偏移, y偏移)，不存在保留原始写入的字符串值，解析这个矩阵就能拿到你要的偏移量。

基础获取方法 #

在你需要取值的位置直接写入以下代码即可拿到当前元素的translateX值：

// 读取浏览器计算后的transform属性
const transformStr = $('.slider').css('transform');
let getElementtransform = 0;
// 未设置过transform时返回值为'none'，做兜底处理
if (transformStr !== 'none') {
  // 拆分矩阵字符串，提取数值
  const matrixParams = transformStr.split('(')[1].split(')')[0].split(',');
  // 矩阵第5位（索引4）就是X方向平移的像素值
  getElementtransform = parseInt(matrixParams[4]);
}

适配你当前轮播逻辑的优化写法 #

你当前用全局变量movment记录偏移的写法存在值和DOM状态不同步的隐患，建议把取值逻辑抽为公共方法，每次操作前先读取实时偏移再计算，改完的完整JS逻辑如下：

const moveStep = 150;
const animateTime = 1000;

// 公共方法：获取指定元素的translateX偏移值
function getCurrentTranslateX($target) {
  const transformVal = $target.css('transform');
  if (transformVal === 'none') return 0;
  const matrixArr = transformVal.split('(')[1].split(')')[0].split(',');
  return parseInt(matrixArr[4]);
}

$('.btn_left').click(function () {
  const currentX = getCurrentTranslateX($('.slider'));
  const targetX = currentX + moveStep;
  $('.slider').css({
    'transform': `translateX(${targetX}px)`,
    'transition': `${animateTime}ms`
  });
})

$('.btn_right').click(function () {
  // 直接调用方法拿到当前transform偏移值
  const currentX = getCurrentTranslateX($('.slider'));
  const targetX = currentX - moveStep;
  $('.slider').css({
    'transform': `translateX(${targetX}px)`,
    'transition': `${animateTime}ms`
  });
})

注意事项 #

• 上述解析逻辑仅适用于元素只设置了translateX平移的场景，如果同时使用了scale、rotate、skew等其他transform变换，需要对应调整矩阵解析规则
• 所有现代浏览器、jQuery 1.8及以上版本都支持通过.css('transform')拿到计算后的矩阵值，不存在兼容性问题
• 不要尝试通过jQuery读取你最初写入的transform原始字符串，浏览器渲染完成后不会保留该值的原始写入格式

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