如何獲得價值平移X由JavaScript

Question

內容元素初始化JavaScript的

content.children[0].style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")"; 

如何獲得此元素平移X的值？

Answer 1

var myElement = document.querySelector('.hello'); 
 
myElement.style.transform = "translateX(" + (-200) + "px) scaleX(" + 1.6 + ") scaleY(" + 1.2 + ")"; 
 

 
function getTranslateX() { 
 
    var style = window.getComputedStyle(myElement); 
 
    var matrix = new WebKitCSSMatrix(style.webkitTransform); 
 
    console.log('translateX: ', matrix.m41); 
 
} 
 

 
document.querySelector('button').addEventListener('click', getTranslateX);

.hello { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: orange; 
 
}

<div class="hello"></div> 
 
<button type="button">get value</button>

如果你想知道爲什麼matrix.m41被解釋here

Answer 2

如果你想成爲幻想（和，對於這個問題，精確），可以使用在一個特殊的方法Window對象。即，.getComputedStyle() method。

假設您的元素有id的myElement。你可以得到如下操作：

window.getComputedStyle(document.getElementById('myElement')).transform; 

當然，什麼是返回反映在同一個元素應用所有的其他變革的共同作用（例如，旋轉，平移，縮放，等）。此外，當查詢transform樣式屬性的值時，我們傾向於以矩陣轉換的形式（，例如,"matrix3d(1, 0, 0, 0, 0, 0.939693, 0.34202, 0, 0, -0.34202, 0.939693, 0, 0, 0, 0, 1)"）獲得難看的東西。我們可能希望避免這種方式，因爲最好的情況是它讓我們不得不解析字符串輸出的麻煩。

然後，我的建議是保持簡單，只需在style object（更具體地說就是CSSStyleDeclaration object）上查詢transform屬性。檢查它：

​​

再次，我們得到一個字符串類型的輸出，但麻煩也由該字符串的簡單性得到了極大的緩解。通過利用String對象原型的replace方法並傳遞一個簡單的正則表達式，我們可以在transformStyle值修剪到我們想要：

const translateX = transformStyle.replace(/[^\d.]/g, ''); 
// => "1239.32" 

如果你想要的輸出作爲Number數據類型，簡單地追加+一元運算符在整個語句之前強制成這樣：

const translateX_Val = +translateX; 
// => 1239.32