Hay tres divs y cada uno de ellos obtuvo un valor diferente de la propiedad de transform .
Los guardo en una variable por getElementsByClassName y luego uso el método de find para encontrar el elemento en el que la transform es 10px.
Sin embargo, no funciona porque el error en la consola dice que es 'indefinido', lo que significa que no se puede encontrar, supongo...
¿Qué estoy haciendo mal?
const elm = document.getElementsByClassName('elm'); const elms = [...elm].find(function (s) { const item = getComputedStyle(s).transform; return item === 'translateX(10px)'; }); console.log(elms); .elm1 { transform: translateX(-20px); } .elm2 { transform: translateX(10px); } .elm3 { transform: translateX(20px); } <div class="elm elm1"></div> <div class="elm elm2"></div> <div class="elm elm3"></div>Sus valores de transformación se convertirán en valores de matriz
Los valores representan las siguientes funciones: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
Por lo tanto, debe verificar los valores de matriz como a continuación
translateX(-20px) = matrix(1, 0, 0, 1, -20, 0)
translateX(10px) = matrix(1, 0, 0, 1, 10, 0)
translateX(20px) = matrix(1, 0, 0, 1, 20, 0)
const elm = document.getElementsByClassName('elm'); const elms = [...elm].find(function (s) { const item = getComputedStyle(s).transform; return item === 'matrix(1, 0, 0, 1, 10, 0)'; }); console.log(elms); .elm1 { transform: translateX(-20px); } .elm2 { transform: translateX(10px); } .elm3 { transform: translateX(20px); } <div class="elm elm1"></div> <div class="elm elm2"></div> <div class="elm elm3"></div>