How to get translateX value of a component with javascript?

Question

I need to get the translateX value of my component.

I followed the instructions of both first and second answers of this post: How to get value translateX by javascript

I checked other posts as well, but most of them suggest the same solutions.

I also checked the matrix() documentation. But I am not able to get it right.

I am trying to use WebKitCSSMatrix which gives me the matrix, but the position which I believe to be what I need (m41) is 0, and none of the others is the actual translateX value.

I am also trying with getComputedStyle, which gives me this: matrix(1, 0, 0, 1, -1352, 0), I could work with the fifth value, but I don't know how to extract it, I tried with m41, but I am getting undefined. I know I could use a RegEx to get the fifth value, but I'd like to know if there is a more straightforward way to do that. Besides it would be better to get the value as I set them, as percentage, like in the css file, 200%

Besides that I tried the simple element.style.transform, but here I get an empty string.

I'd like to know two things:

-> What is wrong with my code?

-> How can I actually get the translateX value?

function passTeste(arg) {
  
    const element = document.getElementById("mainImage-teste-js")
    
    const transformValue = window.getComputedStyle(element).transform;
    var matrix = new WebKitCSSMatrix(element.webkitTransform);
    
    console.log(element.style.transform) // Returns empty value

    console.log(matrix); // Returns the matrix 
    console.log(transformValue); // Returns =>  matrix(1, 0, 0, 1, -1352, 0)
}

.container {
      width: 200px;
      overflow: hidden;
}
.product__image--mainImage {
        
        display: flex;

        transition: 2s;

        transform: translate(-200%);
}

.product__image--mainImage img {
    max-width: 100%;
}

.container > p {
   display: flex; 
   justify-content: space-between; 
   font-size: 45px; 
   cursor: pointer;
}

<div id="mainImage-teste-js" class="container">
    <div class="product__image--mainImage">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />
     </div>
     <p onclick="passTeste()">></p>
 </div>

*I know I could use a RegEx to get the fifth value, but I'd like to know if there is a more straightforward way to do that.* --> not really. The only other way is to read the CSS file to extract the value as defined (not trivial too) — Temani Afif, Dec 05 '20 at 00:34

score 1 · Accepted Answer · answered Dec 05 '20 at 00:41

You are almost good, you simply need to apply the computed value to WebKitCSSMatrix in order to read the m41 and since transform is based on the element dimension you can find the percentage value as well:

function passTeste(arg) {

  const element = document.querySelector("#mainImage-teste-js > div")

  const transformValue = window.getComputedStyle(element).transform;
  const w = window.getComputedStyle(element).width;
  var matrix = new WebKitCSSMatrix(transformValue);

  console.log(w);
  console.log(matrix.m41);
  console.log(matrix.m41/parseInt(w)*100+"%");

}

.container {
  width: 200px;
  overflow: hidden;
}

.product__image--mainImage {
  display: flex;
  transition: 2s;
  transform: translate(-200%);
}

.product__image--mainImage img {
  max-width: 100%;
}

.container>p {
  display: flex;
  justify-content: space-between;
  font-size: 45px;
  cursor: pointer;
}

<div id="mainImage-teste-js" class="container">
  <div class="product__image--mainImage">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />
  </div>
  <p onclick="passTeste()">></p>
</div>

@Berg_Durden you need to either do a calculation like I did (check the update) or read the CSS file as a text to extract the value (not easy) — Temani Afif, Dec 05 '20 at 00:47
Yes, I saw your edit after my last comment. I already deleted it. Both options work great. Thank you very much. — Berg_Durden, Dec 05 '20 at 00:50

How to get translateX value of a component with javascript?

1 Answers1