CODEWITHSUNDEEP
javascripthtmlcssdom
Berg_Durden
Berg_Durden

Reputation: 1781

How to get translateX value of a component with javascript?

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>

Upvotes: 2

Views: 3198

Answers (1)

Temani Afif
Temani Afif

Reputation: 272927

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>

Upvotes: 1

Related Questions