主页 / coding / 问题 / 77427656
Accepted
Math
Asked: 2023-11-06 05:01:58 +0800 CST

如何从js中的css转换返回值？

  • 772

我试图从 js 中的 css 变换矩阵返回一个值。

该元素是一个具有以下 css 的 div：

transform: translateY(-560px)

在我的 JS 中，我目前通过这样做来获取矩阵：

  const el = document.querySelector('[data-holder]')
  return getComputedStyle(el).transform

上面的代码给了我：

matrix(1, 0, 0, 1, 0, -560)

我如何从矩阵中提取最后一个值？

javascript

2 个回答

  1. Best Answer

    解析计算出的 CSS 很脆弱；您可能会在不同的浏览器中收到不同的值，这必须得到满足。

    从对你的问题的评论来看，你说 CSS 是......

    在js函数中设置

    在这种情况下，以更可用的方式记录相关数据也是有意义的。例如，使用另一个数据属性

    const translateY = -560;
el.style.transform = `translateY(${translateY}px)`;
el.dataset.transformTranslateY = translateY;

    然后您可以稍后轻松地读回该值

    const translateY = el.dataset.transformTranslateY;
    • 1

  2. 我将其添加为一种替代方法，它可以直接访问我们想要的矩阵中的插槽。

    const el = document.querySelector('[data-holder]')
const transformValue = el.style.transform;

// A matrix can be represnted like this:
// matrix(a, b, c, d, e, f)

// Prints the final number in the matrix
console.log(
 new DOMMatrix(transformValue).f
)

    jsFiddle

    • 1

相关问题