如何讀取JavaScript中的單個變換值？

來自去年的的Webkit博客文章解釋了可用於-webkit-transform屬性的各種變換「函數」。例如：如何讀取JavaScript中的單個變換值？

#myDiv { 
    -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px); 
}

我的問題：你如何訪問JavaScript中的各個值？當你閱讀元素的webkitTransform財產，你只會得到一個Matrix3D（）函數在它16個值，像這樣...

matrix3d(0.958684, 0.000000, .....)

有沒有辦法，只是閱讀一個人的價值轉換的事，像rotateY（）？或者我必須從matrix3d（）字符串讀取它，以及如何？

來源

2010-08-07 callum

這link from Apple Dev Reference可能揭示的主題更多的光線：

的webkitTransform屬性的變換操作列表的字符串表示。通常這個列表包含單個矩陣變換操作。對於3D 變換，值爲「matrix3d（...）」，括號內爲之間的4x4齊次矩陣的16個值。對於2D變換，值是包含6個矢量值的「矩陣（...）」字符串。

來源

2010-08-08 02:11:54 donohoe

由於您只從計算樣式中獲得最終矩陣值，因此可能需要檢查元素的內嵌樣式或樣式表規則。如果element.style.webkitTransform不給你任何東西，你可以遍歷文檔的樣式表，看看哪一個符合你的元素。然後，您可以將webkitTransform屬性正則表達式來獲取/設置值。

來源

2010-08-08 03:57:12 syockit

我想到了一種可能性。如果你準備在JavaScript解析字符串，請使用

data=document.getElementById("myDiv").getAttribute("-webkit-transform");

然後解釋data。

來源

2010-08-08 10:50:22 kalyanji

-webkit-轉換不是一個屬性，所以無法通過屬性訪問它，你應該訪問的風格與元素關聯的對象。 – shabunc 2011-07-21 20:15:11

我認爲，作爲syockit說，通過樣式表迭代是唯一的道路要走，你可以使用webkitMatchesSelector發現匹配您的元件，它的規則：

var theRules = new Array(); 
var theStylesheet = document.styleSheets; 
if (document.styleSheets[0].cssRules) 
     theRules = document.styleSheets[0].cssRules 
else if (document.styleSheets[0].rules) 
     theRules = document.styleSheets[0].rules 

var elem = document.getElementById("myDiv"); 

for (var i=0; i < theRules.length; i++) { 
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) { 
     var theStyles = theRules[i].style; 
     var j = theStyles.cssText.indexOf('-webkit-transform:'); 
     if (j>-1) { 
      var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
      document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s); 
     } 
    } 
}

這假設標記這樣的事情，我加入一些額外的規則和價值，以確保我拉出正確的價值觀。如果你有一個以上的樣式表，那麼你需要調整的第一部分通過所有的樣式表迭代過了，你可能會不得不面對專一如果你的-webkit-transform出現在多於一個規則：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Get style</title> 
    <style> 
    div { 
     margin: 2em; 
     padding: 2em; 
    } 
    #myDiv { 
     -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px); 
     border: 1px solid; 
    } 
    </style> 
</head> 
<body> 
    <div id="myDiv"> 
     Just testing. 
    </div> 
    <div id="output"> 
    </div> 
</body> 
</html>

來源

2010-08-08 20:51:39 robertc

+1很好的答案，雖然只適用於CSS內聯樣式 – 2013-03-23 14:21:14

我的意思是「雖然只適用於內部樣式表」 – 2013-03-23 16:19:44

我在小提琴上添加了代碼並且無法讀取http://jsfiddle.net/ypf2wv4g/9/ – thednp 2014-10-04 00:45:20

今天早上我遇到了這個問題。看起來JavaScript不能讀取元素的style.webkitTransform屬性，除非它已經在元素的style屬性中明確設置（在HTML中內聯或通過JavaScript程序化）。正如這聽起來一樣，如果你需要JS能夠讀取CSS轉換屬性，那麼當DOM準備就緒時，用JavaScript定義它們的初始值可能會更好。

實例，使用jQuery：

$(document).ready(function(){ 
    $('.transform').css('webkitTransform', 'translateX(0)'); 
});

從這點出發，你就可以讀取元素的變換字符串，通過解析爲需要的值。

來源

2012-01-23 18:01:44 Aaron

// Suppose the transformed element is called "cover". 
var element = document.getElementById('cover'); 
computedStyle = window.getComputedStyle(element, null); // "null" means this is not a pesudo style. 
// You can retrieve the CSS3 matrix string by the following method. 
var matrix = computedStyle.getPropertyValue('transform') 
    || computedStyle.getPropertyValue('-moz-transform') 
    || computedStyle.getPropertyValue('-webkit-transform') 
    || computedStyle.getPropertyValue('-ms-transform') 
    || computedStyle.getPropertyValue('-o-transform'); 

// Parse this string to obtain different attributes of the matrix. 
// This regexp matches anything looks like this: anything(1, 2, 3, 4, 5, 6); 
// Hence it matches both matrix strings: 
// 2d: matrix(1,2,3,4,5,6) 
// 3d: matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16); 
var matrixPattern = /^\w*\((((\d+)|(\d*\.\d+)),\s*)*((\d+)|(\d*\.\d+))\)/i; 
var matrixValue = []; 
if (matrixPattern.test(matrix)) { // When it satisfy the pattern. 
    var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', ''); 
    console.log(matrixCopy); 
    matrixValue = matrixCopy.split(/\s*,\s*/); 
}

希望這有助於！請注意，我沒有使用除普通DOM API和本機Javascript RegExp函數之外的其他庫。因此，這應該普遍跨瀏覽器和應用程序。

來源

2012-11-28 02:41:43 lixiang

雖然這會將每個矩陣值拆分成一個數組，但這些值並不代表CSS轉換屬性，因此不會回答OP的問題。 – 2014-06-09 10:38:25

你可以使用正則表達式來獲得地圖屬性值的：

如果變量transformstyle包含樣式值

//get all transform declarations 
(transformstyle.match(/([\w]+)\(([^\)]+)\)/g)||[]) 
     //make pairs of prop and value   
    .map(function(it){return it.replace(/\)$/,"").split(/\(/)}) 
    //convert to key-value map/object   
    .reduce(function(m,it){return m[it[0]]=it[1],m},{})

爲：

var transformstyle="-webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px)"

你會得到：

{scale: "1.1", rotateY: "7deg", translateZ: "-1px"}

來源

2013-12-08 04:16:25 user2044802

令人驚訝的是，這樣一個真棒功能沒有更強大的JavaScript API。真的，個人價值觀需要使用正則表達式來解析？布萊什。 – freakTheMighty 2013-12-18 06:14:09

不！標準js getComputedStyle返回一個矩陣/矩陣3d。所以，你必須解析和計算矩陣數據才能獲得css變換。 – Jordan 2014-04-25 23:40:46

雖然這會將每個矩陣值拆分爲一個數組，但這些值不代表CSS轉換屬性，因此不會回答OP的問題。 – 2014-06-09 10:39:52

只是因爲我didn't看到任何可用的JavaScript一個在線解決方案轉換矩陣碼，這裏是我的。快速簡單：

首先讓所有的變換值在矩陣：

var yourDivsCssValues= window.getComputedStyle(yourDiv, null); 
transformValues = testDivCSS.getPropertyValue('transform');

要提取變換-Y作爲一個整數：

var transformValueY = parseInt((yourVariable1.replace (/,/g, "")).split(" ")[5]);

要提取變換-X作爲一個整數：

var transformValuetX = parseInt((yourVariable2.replace (/,/g, "")).split(" ")[4]);

訪問旋轉值是相當困難的，但有一個很好的指導，如果你想t o做到這一點： https://css-tricks.com/get-value-of-css-rotation-through-javascript/

來源

2015-04-13 18:13:34 davedadizzel

老但有趣的問題，沒有以前的反應，試圖回答它。

不幸的是，一般情況下沒有雙線解決方案，我們不知道需要對哪些變換步驟（旋轉，平移等）進行反向設計;越容易越少。

近年來基於WebKit的瀏覽器，可以簡單地查詢以前分配的屬性：

var element = document.querySelector('div.slipping'); 
element.style.webkitTransform 
    -> "translate(-464px, 0px)"

讓我們繼續與計算出的風格需要使用的假設。例如，如果元素處於CSS過渡或CSS動畫的中間，即當前轉換不是直接設置的轉換，則需要出現。

getComputedStyle返回的矩陣描述符字符串確實可以通過正則表達式解析，但並非上述所有版本都可靠，而且它們太不透明。一個直接的方法來分解字符串，除非它是在一個非常緊密循環，值得一單通正則表達式，是這樣的：

var matrixString = window.getComputedStyle(element).webkitTransform; 
var matrix = matrixString 
      .split('(')[1] 
      .split(')')[0] 
      .split(',') 
      .map(parseFloat);

但另一種方法是簡單地用這個，這是以前沒有提及的：

var cssMatrix = new WebKitCSSMatrix(matrixString);

後一種方法的好處是，你得到一個4x4矩陣爲好，這是affine transformations標準表示，而缺點是，它的特定課程的WebKit。如果您繼續處理問題中的六個值的元組，則它定義爲in this part of the CSS standard。

然後，變換例如旋轉需要被反向設計。可以有許多由CSS直接支持的簡單變換，例如平移，縮放，旋轉，傾斜和透視。如果只應用其中的一個，那麼您只需要恢復computing the transform matrix的過程。

另一種方法是查找或翻譯在JS中爲你做這個的代碼，例如the same document或Section 7.1 of the CSS standard包含這樣的註釋算法。好處是，即使應用了多於一種（平移，旋轉等），但有一些限制，unmatrix方法能夠返回「原子」變換。由於不可能保證一般情況下變換步驟的成功逆向工程，因此考慮可能應用的變換類型以及是否避免了退化或其他麻煩的情況是很有用的。即您需要根據您認爲適合您的問題的方式構建解決方案。

具體而言，所有2D CSS變換的矩陣版本爲documented here as well，低於CSS 2D變換矢量中六個值的含義。

另一個需要注意的是，在幾何操作方面還有其他影響視覺效果的因素，例如transform-origin。

來源

2015-05-24 19:44:50

簡單的方法來從一個複雜的提取每個值轉換值：

function parseComplexStyleProperty(str){ 
 
    var regex = /(\w+)\((.+?)\)/g, 
 
     transform = {}, 
 
     match; 
 

 
    while(match = regex.exec(str)) 
 
     transform[match[1]] = match[2]; 
 
    
 
    return transform; 
 
} 
 

 
////////////////////////////////////////// 
 

 
var dummyString = "translateX(-50%) scale(1.2)", 
 
    transformObj = parseComplexStyleProperty(dummyString); 
 

 
console.log(transformObj);

來源

2016-07-16 10:09:22 vsync

如何讀取JavaScript中的單個變換值？

回答

相關問題