Início / coding / Perguntas / 77427656
Accepted
Math
Asked: 2023-11-06 05:01:58 +0800 CST

Como retornar valor de uma transformação css em js?

  • 772

Estou tentando retornar um valor de uma matriz de transformação css em js.

O elemento é uma div com o seguinte css:

transform: translateY(-560px)

No meu JS, estou obtendo a matriz fazendo o seguinte:

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

O código acima me dá:

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

Como posso extrair esse último valor da matriz?

javascript

2 respostas

  1. Best Answer

    A análise de CSS computado é frágil; você pode receber valores diferentes em navegadores diferentes que precisariam ser atendidos.

    Nos comentários da sua pergunta, você afirma que o CSS é...

    definido em uma função js

    Nesse caso, faria sentido registar também os dados relevantes de uma forma mais utilizável. Por exemplo, usando outro atributo de dados

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

    Então você pode facilmente ler esse valor posteriormente

    const translateY = el.dataset.transformTranslateY;
    • 1

  2. Estou adicionando isso como uma abordagem alternativa, que dá acesso direto ao slot na matriz que desejamos.

    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

relate perguntas