首頁猿問如何使用javascript獲取組...

如何使用javascript獲取組件的translateX值？

JavaScript

慕后森 2023-10-14 16:02:18

我需要獲取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價值？

查看完整描述

2 回答

慕尼黑的夜晚無繁華

TA貢獻1864條經驗獲得超6個贊

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>

</div>

反對回復 2023-10-14

陪伴而非守候

TA貢獻1757條經驗獲得超8個贊

你幾乎很好，你只需要應用計算值來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>

</div>

反對回復 2023-10-14

2 回答
0 關注
298 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用javascript獲取組件的translateX值？

如何使用javascript獲取組件的translateX值？

2 回答

添加回答

如何使用javascript獲取組件的translateX值？

如何使用javascript獲取組件的translateX值？