如何使用javascript获取组件的translateX值？

Question

我需要获取translateX我的组件的值。我按照这篇文章的第一个和第二个答案的说明进行操作：How to get value translateX by javascript我也检查了其他帖子，但大多数都提出了相同的解决方案。我还检查了matrix()文档。但我无法做到正确。我正在尝试使用WebKitCSSMatrix它给我矩阵，但我认为我需要的位置（m41）是0，并且其他都不是实际的translateX值。我也在尝试使用getComputedStyle，这给了我这个：matrix(1, 0, 0, 1, -1352, 0)，我可以使用第五个值，但我不知道如何提取它，我尝试使用m41，但我得到了undefined。我知道我可以使用 aRegEx来获取第五个值，但我想知道是否有更直接的方法来做到这一点。此外，最好获取我设置的值（百分比），就像在 css 文件中一样，200%除此之外，我尝试了简单的element.style.transform，但这里我得到一个空字符串。我想知道两件事：-> 我的代码有什么问题吗？-> 我怎样才能真正获得translateX价值？

Answer 1

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>

Answer 2

你几乎很好，你只需要应用计算值来WebKitCSSMatrix读取m41，因为变换是基于元素尺寸的，你也可以找到百分比值：

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>