Find method not working for transform property

Question

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 class="elm elm1"></div>
<div class="elm elm2"></div>
<div class="elm elm3"></div>

score 0 · Accepted Answer · answered Apr 15 '22 at 08:47

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 class="elm elm1"></div>
<div class="elm elm2"></div>
<div class="elm elm3"></div>

Find method not working for transform property

1 Answers1