パーセントとして設定された魔女のjqueryを使用して直接変換のCSS値を取得する方法

Question

私は変換を設定しています：translate（200％、700％）;

私はそれはPXと私にこのvaluseを取るの下のコードでそれを読み取ろう：

calculateAllowed = function (obj) { 
     var matrix = $(obj).css('transform'); 
     alert(matrix); 
     var values = matrix.match(/-?[\d\.]+/g); 
     var x = values[4]; 
     alert(x); 
}; 

xが、私は200または「200％」を得ることを期待整数

です。 最初に設定したパーセント値をどのように得ることができますか？

Answer 1

代わりの

$(element).css('transform'); 

あなたは使用することができます。

javscriptを使用している場合：

element.style.transform 

UsinをGのjQuery：生CSS宣言を得るための唯一の方法はdocument.styleSheets `を介して露出され、スタイルシートAPIを介しれるjavascript

function myFunction() { 
 
    var matrix = document.getElementById("myDIV").style.transform; 
 
    alert(matrix); 
 
    var values = matrix.match(/-?[\d\.]+/g); 
 
    alert(values); 
 
}

#myDIV { 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: coral; 
 
    color: white; 
 
}

<button onclick="myFunction()">Try it</button> 
 
<div id="myDIV" style="transform: translate(20%, 70%)"> 
 
    <h1>myDIV</h1> 
 
</div>

Answer 2

幅で除算し、100を掛けてパーセント形式で取得する必要があります。

function calculateAllowed(obj) { //just for easy testing 
 
     var matrix = $(obj).css('transform'); 
 
     console.log(matrix); 
 
     var values = matrix.match(/-?[\d\.]+/g); 
 
     var x = values[4]; 
 
     var end = x/$(obj).width() * 100; 
 
     console.log(end); 
 
}; 
 

 
calculateAllowed($("div"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div style="transform: translate(200%, 700%)" >afwe</div>