एक तत्व के पैमाने का मूल्य प्राप्त करें?

Question

मुझे आश्चर्य है कि मैं तत्व के पैमाने का मूल्य कैसे प्राप्त कर सकता हूं?

मैं $(element).css('-webkit-transform'); जो matrix(scaleX,0,0,scaleY,0,0); रिटर्न वहाँ scaleX और केवल scaleY होने का एक रास्ता है की कोशिश की?

Answer 1

यदि यह एक मैट्रिक्स द्वारा निर्दिष्ट किया गया था मुझे लगता है कि आप एक सरल तरीके से नहीं कर सकते हैं, लेकिन आप आसानी मूल्य पार्स कर सकते हैं:

var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, 
    matches = $(element).css('-webkit-transform').match(matrixRegex); 

matches[1] scaleX में शामिल होंगे और matches[2] scaleY शामिल होंगे। यदि यह संभव है कि अन्य परिवर्तन भी लागू किए गए हैं, तो आपको रेगेक्स को थोड़ा सा ट्विक करना होगा, क्योंकि अब यह मानता है कि अन्य सभी पैरामीटर 0.

किसी भी ट्रांसफॉर्म को हटाने के लिए स्केल मान प्राप्त करने का एक तरीका हो सकता है , तत्व की गणना की चौड़ाई/ऊंचाई को मापें और फिर उन्हें वापस जोड़ें और फिर मापें। फिर नए/पुराने मूल्यों को विभाजित करें। कोशिश नहीं की है, लेकिन यह काम कर सकता है। jQuery स्वयं कई मापों के लिए एक समान दृष्टिकोण का उपयोग करता है, इसके लिए इसके लिए एक अनियंत्रित $.swap() फ़ंक्शन भी है।

पीएस: आप -o-transform-moz-transform और -ms-transform का भी उपयोग कर रहे हैं, है ना?

Answer 2

आप केवल वेबकिट लक्षित करने के लिए (क्योंकि यह iPhone के लिए है, या iPad) सबसे विश्वसनीय और तेज़ तरीका है देशी जावास्क्रिप्ट वेबकिट प्रदान करता है का उपयोग कर की जरूरत है:

node = $("#yourid")[0]; 
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform); 
alert(curTransform.a); // curTransform is an object, 
alert(curTransform.d); // a through f represent all values of the transformation matrix 

आप यहाँ एक डेमो देख सकते: http://jsfiddle.net/umZHA/

Answer 3

ओपी के लिए बहुत देर हो चुकी है लेकिन भविष्य में उपयोगी हो सकती है। विभाजन का उपयोग कर यह करने के लिए एक सरल तरीका है:

function getTransformValue(element,property){  
     var values = element[0].style.webkitTransform.split(")"); 
     for (var key in values){ 
      var val = values[key];    
      var prop = val.split("(");   
      if (prop[0].trim() == property) 
       return prop[1]; 
     }     
     return false;   
    } 

यह वेबकिट सटीक है, लेकिन आसानी से अधिक ब्राउज़रों मुट्ठी लाइन को संशोधित करने के लिए बढ़ाया जा सकता है।

Answer 4

सरल समाधान दस्तावेज़ के बीच पैमाने कारक पता लगाने के लिए और एक तत्व निम्नलिखित है:

var element = document.querySelector('...'); 
var scaleX = element.getBoundingClientRect().width/element.offsetWidth; 

यह काम करता है क्योंकि getBoundingClientRect वास्तविक आयाम देता है, जबकि offsetWidth/ऊंचाई बगैर माप का आकार है।