Find method not working for transform property-CodePudding

There are three divs and each of them got a different value of the transform property.

I save them into a variable by getElementsByClassName and then use the find method to find the element in which the transform is 10px.

However, it's not working because the error in the console said that is 'undefined' which means it cannot be found I guess...

What am I doing wrong?

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 ></div>
<div ></div>
<div ></div>

CodePudding user response：

Your transform values will be converted to matrix values

The values represent the following functions: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

Therefore, you should check matrix values like below

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 ></div>
<div ></div>
<div ></div>