獲取元素的比例值？

我想知道如何獲得元素的縮放值？獲取元素的比例值？

我試圖$(element).css('-webkit-transform');返回matrix(scaleX,0,0,scaleY,0,0);有越來越scaleX只有scaleY的一種方式？

2011-04-09 einstein

如果它是由一個矩陣指定我想你不能用一個簡單的方法，但你可以輕鬆地分析值：

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()函數。

PS：您正在使用-o-transform-moz-transform和-ms-transform過，對吧？

來源

2011-04-09 09:40:12

+1讓我意識到遊戲是不值得的蠟燭。在我瘋狂之前，我必須做一些簡單的事情。^_^ – Robusto 2015-07-23 13:08:24

如果其他參數不是0，我們可以使用'matrixRegex =/matrix \（\ s *（ - ？\ d * \。？\ d *），\ s *（ - ？\ d * \ ？\ d *）\ S *（？ - ？\ d * \ \ d *）\ S *（？ - ？\ d * \ \ d *）\ S *（ - ？\ d * \。？\ d *），\ s *（ - ？\ d * \。？\ d *）\）/' – Massale 2017-02-25 11:13:46

如果您只需要針對WebKit的（因爲它是爲iPhone或iPad）的最可靠，最快捷的方式是使用JavaScript的WebKit提供了原生：

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/

來源

2011-04-10 02:14:50 Duopixel

對於OP來說太晚了，但可能在未來有用。有一個簡單的方法使用分裂做到這一點：

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;   
    }

這是WebKit的具體的，但可以很容易地擴展更多的瀏覽器修改拳頭線。

來源

2013-06-19 10:01:40 caiocpricci2

最簡單的方法來找出文檔之間的比例因子和元素如下：

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

這工作，因爲getBoundingClientRect返回的實際尺寸，而offsetWidth /身高是未縮放大小。

來源

2014-11-12 18:11:42

很好的答案。它在Chrome上運行良好，MDN網站建議它可以在IE9 +上運行 - https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect – Charlie 2015-05-24 02:00:09

好的答案。我不知道getBoundingClientRect會得到實際的縮放大小。 – lislis 2015-12-04 20:59:25

在iOS Webview中'element.getBoundingClientRect（）。width'不會返回縮放寬度，只是正常寬度。我使用'window.screen.width'代替。 – 2016-04-20 09:30:59

獲取元素的比例值？

回答

相關問題