如何使用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) {&nbsp;&nbsp;&nbsp; &nbsp; const element = document.getElementById("mainImage-teste-js")&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const transformValue = window.getComputedStyle(element).transform;&nbsp; &nbsp; var matrix = new WebKitCSSMatrix(element.webkitTransform);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; console.log(element.style.transform) // Returns empty value&nbsp; &nbsp; console.log(matrix); // Returns the matrix&nbsp;&nbsp; &nbsp; console.log(transformValue); // Returns =>&nbsp; matrix(1, 0, 0, 1, -1352, 0)}.container {&nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; overflow: hidden;}.product__image--mainImage {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; transition: 2s;&nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-200%);}.product__image--mainImage img {&nbsp; &nbsp; max-width: 100%;}.container > p {&nbsp; &nbsp;display: flex;&nbsp;&nbsp; &nbsp;justify-content: space-between;&nbsp;&nbsp; &nbsp;font-size: 45px;&nbsp;&nbsp; &nbsp;cursor: pointer;}<div id="mainImage-teste-js" class="container">&nbsp; &nbsp; <div class="product__image--mainImage">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<p onclick="passTeste()">></p>&nbsp;</div>

Answer 2

你几乎很好，你只需要应用计算值来WebKitCSSMatrix读取m41，因为变换是基于元素尺寸的，你也可以找到百分比值：function passTeste(arg) {&nbsp; const element = document.querySelector("#mainImage-teste-js > div")&nbsp; const transformValue = window.getComputedStyle(element).transform;&nbsp; const w = window.getComputedStyle(element).width;&nbsp; var matrix = new WebKitCSSMatrix(transformValue);&nbsp; console.log(w);&nbsp; console.log(matrix.m41);&nbsp; console.log(matrix.m41/parseInt(w)*100+"%");}.container {&nbsp; width: 200px;&nbsp; overflow: hidden;}.product__image--mainImage {&nbsp; display: flex;&nbsp; transition: 2s;&nbsp; transform: translate(-200%);}.product__image--mainImage img {&nbsp; max-width: 100%;}.container>p {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; font-size: 45px;&nbsp; cursor: pointer;}<div id="mainImage-teste-js" class="container">&nbsp; <div class="product__image--mainImage">&nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />&nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />&nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOues59dCMXRYVPt6H8XvWGAuPlwHBprFWEw&usqp=CAU" />&nbsp; &nbsp; <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUEwJ_CKwAt4M1k_UTZSUCVUTy2XWjWLdK3w&usqp=CAU" />&nbsp; </div>&nbsp; <p onclick="passTeste()">></p></div>